@bildvitta/quasar-ui-asteroid 3.14.0-beta.2 → 3.14.0-beta.3

package/package.json

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

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

@@ -54,7 +54,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['sign-out', 'toggle-menu'])
+const emit = defineEmits(['sign-out', 'toggle-menu', 'toggle-notifications'])
 
 const router = useRouter()
 const screen = useScreen()
@@ -68,6 +68,7 @@ const defaultAppUserProps = computed(() => {
     },
 
     onSignOut: signOut,
+    onToggleNotifications: toggleNotifications,
     ...props.appUserProps
   }
 })
@@ -96,6 +97,10 @@ function signOut () {
   emit('sign-out')
 }
 
+function toggleNotifications () {
+  emit('toggle-notifications')
+}
+
 function toggleMenuDrawer () {
   emit('toggle-menu')
 }

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

@@ -39,3 +39,6 @@ events:
 
   '@toggle-menu -> function()':
     desc: Dispara quando o botão de "hambúrguer" é clicado para abrir o menu lateral.
+
+  '@toggle-notifications -> function()':
+    desc: Dispara quando o botão de "Notificações" é clicado.

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

@@ -146,7 +146,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['sign-out', 'update:modelValue'])
+const emit = defineEmits(['sign-out', 'update:modelValue', 'toggle-notifications'])
 
 const screen = useScreen()
 const router = useRouter()
@@ -159,7 +159,8 @@ const isMini = ref(screen.isLarge)
 const composableParams = {
   props,
   onMenuUpdate: setHasOpenedMenu,
-  onSignOut: () => emit('sign-out')
+  onSignOut: () => emit('sign-out'),
+  onToggleNotifications: () => emit('toggle-notifications')
 }
 
 const { defaultAppUserProps, showAppUser } = useAppUser(composableParams)

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

@@ -57,6 +57,9 @@ events:
   '@sign-out -> function()':
     desc: Dispara quando o botão de "sair" é clicado.
 
+  '@toggle-notifications -> function()':
+    desc: Dispara quando o botão de "Notificações" é clicado.
+
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.
     params:

package/src/components/app-menu/composables/use-app-user.js

@@ -6,6 +6,7 @@ import { computed } from 'vue'
  * @param {{
  *  props: { appUserProps: {} }
  *  onSignOut: () => void
+ *  onToggleNotifications: () => void
  *  onMenuUpdate: () => void
  * }} config
  */
@@ -14,6 +15,7 @@ export default function useAppUser (config = {}) {
     props,
 
     onSignOut,
+    onToggleNotifications,
     onMenuUpdate
   } = config
 
@@ -29,6 +31,7 @@ export default function useAppUser (config = {}) {
 
       // eventos
       onSignOut,
+      onToggleNotifications,
       ...props.appUserProps
     }
   })

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

@@ -3,9 +3,7 @@
     <div class="relative-position">
       <qas-avatar :image="props.user.photo" :size="props.avatarSize" :title="userName" />
 
-      <q-badge v-if="hasNotifications" color="red" floating>
-        {{ props.notifications.count }}
-      </q-badge>
+      <qas-avatar v-if="hasNotificationInUserAvatar" v-bind="avatarNotificationCountProps" />
     </div>
 
     <div class="ellipsis qas-app-user__data">
@@ -43,20 +41,16 @@
             </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-item v-if="isNotificationsEnabled" v-close-popup class="qas-app-user__menu-item" clickable @click="toggleNotificationsDrawer">
+            <q-item-section avatar class="relative-position">
               <q-icon name="sym_r_notifications" />
+
+              <qas-avatar v-if="hasUnreadNotifications" class="qas-app-user__notification-avatar--icon" v-bind="avatarNotificationCountProps" />
             </q-item-section>
 
             <q-item-section>
               Notificações
             </q-item-section>
-
-            <q-item-section side>
-              <q-badge color="red">
-                {{ props.notifications.count }}
-              </q-badge>
-            </q-item-section>
           </q-item>
 
           <q-item v-close-popup class="qas-app-user__menu-item" clickable @click="signOut">
@@ -77,6 +71,7 @@
 <script setup>
 import QasAvatar from '../avatar/QasAvatar.vue'
 
+import useNotifications from '../../composables/use-notifications'
 import { NotifySuccess, NotifyError } from '../../plugins'
 
 import { ref, computed, watch, inject } from 'vue'
@@ -111,14 +106,19 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['sign-out'])
+const emit = defineEmits(['sign-out', 'toggle-notifications'])
 
 // vindo direto do boot api.js
 const axios = inject('axios')
 
+const { isNotificationsEnabled, unreadNotificationsCount } = useNotifications()
+
 const companiesModel = ref('')
 const loading = ref(false)
 
+const { avatarNotificationCountProps } = useAvatarNotifications()
+
+// computed
 const defaultCompanyProps = computed(() => {
   return {
     loading: loading.value,
@@ -131,8 +131,10 @@ const defaultCompanyProps = computed(() => {
 })
 
 const hasCompaniesSelect = computed(() => !!props.companyProps.options?.length)
-const hasNotifications = computed(() => !!Object.keys(props.notifications).length)
+const hasUnreadNotifications = computed(() => unreadNotificationsCount.value > 0)
+const hasNotificationInUserAvatar = computed(() => isNotificationsEnabled && hasUnreadNotifications.value)
 
+const unreadNotificationsToString = computed(() => String(unreadNotificationsCount.value))
 const userName = computed(() => props.user.name || props.user.givenName)
 
 // watch
@@ -140,6 +142,41 @@ watch(() => props.companyProps.modelValue, value => {
   companiesModel.value = value
 }, { immediate: true })
 
+// composable
+function useAvatarNotifications () {
+  const hasAnimated = ref(false)
+
+  watch(() => unreadNotificationsCount.value, () => {
+    hasAnimated.value = true
+
+    setTimeout(() => {
+      hasAnimated.value = false
+    }, 1000)
+  })
+
+  const avatarNotificationCountProps = computed(() => {
+    const classes = [
+      'qas-app-user__notification-avatar',
+      'animated',
+      {
+        rubberBand: hasAnimated.value
+      }
+    ]
+
+    return {
+      class: classes,
+      color: 'red-14',
+      size: 'xs',
+      title: unreadNotificationsToString.value,
+      useCropTitle: false
+    }
+  })
+
+  return {
+    avatarNotificationCountProps
+  }
+}
+
 // métodos
 function signOut () {
   emit('sign-out')
@@ -169,10 +206,28 @@ function onMenuHide () {
     companiesModel.value = props.companyProps.modelValue
   }
 }
+
+function toggleNotificationsDrawer () {
+  emit('toggle-notifications')
+}
 </script>
 
 <style lang="scss">
 .qas-app-user {
+  &__notification-avatar {
+    animation-duration: 1s;
+    position: absolute;
+    top: 0;
+
+    &:not(&--icon) {
+      right: -4px;
+    }
+
+    &--icon {
+      right: 4px;
+    }
+  }
+
   &__data {
     line-height: 1.1;
   }

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

@@ -43,6 +43,9 @@ events:
   '@sign-out -> function()':
     desc: Dispara quando o botão de "sair" é clicado.
 
+  '@toggle-notifications -> function()':
+    desc: Dispara quando o botão de "Notificações" é clicado.
+
 selectors:
   app-user:
     desc: Seletor do componente.

package/src/components/avatar/QasAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <q-avatar class="text-bold" v-bind="attributes">
     <q-img v-if="hasImage" :alt="props.title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="props.image" @error="onImageLoadedError" />
-    <template v-else-if="hasTitle">{{ firstLetter }}</template>
+    <template v-else-if="hasTitle">{{ label }}</template>
     <q-icon v-else :name="props.icon" />
   </q-avatar>
 </template>
@@ -45,6 +45,11 @@ const props = defineProps({
   title: {
     default: '',
     type: String
+  },
+
+  useCropTitle: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -64,7 +69,8 @@ const attributes = computed(() => {
   const colors = {
     [AvatarColors.Primary]: 'white',
     [AvatarColors.SecondaryContrast]: 'primary',
-    [AvatarColors.Grey4]: 'grey-8'
+    [AvatarColors.Grey4]: 'grey-8',
+    [AvatarColors.Red14]: 'white'
   }
 
   return {
@@ -75,7 +81,7 @@ const attributes = computed(() => {
   }
 })
 
-const firstLetter = computed(() => props.title[0].toUpperCase())
+const label = computed(() => props.useCropTitle ? props.title[0]?.toUpperCase?.() : props.title)
 
 const hasImage = computed(() => !hasImageError.value && !!props.image)
 const hasTitle = computed(() => !!props.title)

package/src/components/avatar/QasAvatar.yml

@@ -10,7 +10,7 @@ props:
   color:
     desc: Cor de fundo (background-color).
     type: String
-    examples: ['primary', 'secondary-contrast', 'grey-4']
+    examples: ['primary', 'secondary-contrast', 'grey-4', 'red-14']
 
   size:
     desc: Tamanho do avatar.

package/src/components/avatar/enums/AvatarColors.js

@@ -5,5 +5,6 @@
 export const AvatarColors = {
   Primary: 'primary',
   SecondaryContrast: 'secondary-contrast',
-  Grey4: 'grey-4'
+  Grey4: 'grey-4',
+  Red14: 'red-14'
 }

package/src/components/card/QasCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="col-12 col-lg-3 col-md-4 col-sm-6">
     <q-card class="border-radius-lg column full-height overflow-hidden" :class="cardClasses">
-      <header v-if="props.useHeader" class="overflow-hidden relative-position w-full">
+      <header v-if="props.useHeader" class="full-width overflow-hidden relative-position">
         <slot name="header">
           <q-carousel v-model="slideImage" animated class="cursor-pointer" height="205px" infinite :navigation="hasImages" navigation-icon="sym_r_fiber_manual_record" swipeable>
             <template #navigation-icon="{ active, btnProps, onClick }">
@@ -17,8 +17,8 @@
         </slot>
       </header>
 
-      <q-card-section class="col-grow column justify-between w-full">
-        <div class="w-full" :class="gutterClass">
+      <q-card-section class="col-grow column full-width justify-between">
+        <div class="full-width" :class="gutterClass">
           <slot />
         </div>
       </q-card-section>

package/src/components/dialog/QasDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-dialog ref="dialogRef" class="qas-dialog" data-cy="dialog" :persistent="props.persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
+  <q-dialog ref="dialogRef" class="qas-dialog" :class="classes" data-cy="dialog" v-bind="dialogProps" :persistent="props.persistent" @update:model-value="updateModelValue">
     <div class="bg-white q-pa-lg" :style="style">
       <header v-if="hasHeader" class="q-mb-lg">
         <slot name="header">
@@ -136,6 +136,21 @@ const { defaultCancel, hasCancel } = useCancel(composablesParams)
 const { defaultOk, hasOk, onOk } = useOk(composablesParams)
 const { descriptionComponent, mainComponent } = useDynamicComponents({ ...composablesParams, onOk, hasOk })
 
+/**
+ * Classes criadas para serem utilizadas quando usado com a prop "position", pois
+ * o comportamento do dialog muda, e não é possível usar em conjunto com a prop
+ * "useFullMaxWidth", então foi necessário uma trativa.
+ */
+const classes = computed(() => {
+  const isRightPosition = attrs.position === 'right'
+  const isLeftPosition = attrs.position === 'left'
+
+  return {
+    'qas-dialog--right': isRightPosition,
+    'qas-dialog--left': isLeftPosition
+  }
+})
+
 const dialogProps = computed(() => {
   return {
     ...(!props.usePlugin && { modelValue: props.modelValue }),
@@ -183,5 +198,18 @@ function updateModelValue (value) {
   .q-dialog__inner > div {
     box-shadow: $shadow-2;
   }
+
+  &--right {
+    .q-dialog__inner {
+      width: 100%;
+      justify-content: end;
+    }
+  }
+
+  &--left {
+    .q-dialog__inner {
+      width: 100%;
+    }
+  }
 }
 </style>

package/src/components/drawer/QasDrawer.vue

@@ -0,0 +1,117 @@
+<template>
+  <qas-dialog class="qas-drawer" v-bind="attributes" @update:model-value="onUpdateModelValue">
+    <template #header>
+      <div class="items-center justify-between row">
+        <span data-cy="drawer-title">
+          <slot name="title">
+            <h3 v-if="props.title" class="text-h3">
+              {{ props.title }}
+            </h3>
+          </slot>
+        </span>
+
+        <qas-btn v-close-popup class="z-max" color="grey-10" data-cy="drawer-close-btn" icon="sym_r_close" variant="tertiary" @click="emit('update:modelValue', false)" />
+      </div>
+    </template>
+
+    <template #description>
+      <div>
+        <div class="relative-position" data-cy="drawer-default">
+          <slot />
+        </div>
+
+        <div v-if="props.loading" class="qas-drawer__loading" :style="loadingStyle">
+          <div class="full-height relative-position">
+            <q-inner-loading :showing="props.loading">
+              <q-spinner color="grey" size="2em" />
+            </q-inner-loading>
+          </div>
+        </div>
+      </div>
+    </template>
+  </qas-dialog>
+</template>
+
+<script setup>
+import useScreen from '../../composables/use-screen.js'
+
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasDrawer',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  dialogProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  maxWidth: {
+    type: String,
+    default: ''
+  },
+
+  position: {
+    type: String,
+    default: 'left',
+    validator: value => ['left', 'right'].includes(value)
+  },
+
+  title: {
+    type: String,
+    default: ''
+  },
+
+  loading: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
+const screen = useScreen()
+
+const loadingStyle = computed(() => {
+  return {
+    right: `calc(100% - ${props.maxWidth})`
+  }
+})
+
+const attributes = computed(() => {
+  const maxWidth = screen.isSmall ? '100%' : props.maxWidth
+
+  const { modelValue } = attrs
+
+  return {
+    persistent: false,
+    modelValue,
+
+    ...props.dialogProps,
+
+    cancel: false,
+    maxWidth,
+    maximized: true,
+    ok: false,
+    position: props.position,
+    useFullMaxWidth: true
+  }
+})
+
+function onUpdateModelValue (value) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<style lang="scss">
+.qas-drawer {
+  &__loading {
+    height: 100vh;
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+}
+</style>

package/src/components/drawer/QasDrawer.yml

@@ -0,0 +1,57 @@
+type: component
+
+meta:
+  desc: Componente de drawer que implementa o QasDialog.
+
+props:
+  dialog-props:
+    desc: Repassa propriedades para o QasDialog.
+    default: {}
+    type: Object
+
+  max-width:
+    desc: Tamanho máximo do dialog.
+    type: String
+
+  model-value:
+    desc: Model do componente, abre ou fecha o drawer.
+    type: Boolean
+    examples: [v-model="value"]
+    model: true
+
+  position:
+    desc: 'Posição do drawer, sendo possível apenas 2 opções: [left, right].'
+    default: left
+    type: String
+
+  title:
+    desc: Titulo do drawer.
+    type: String
+
+slots:
+  default:
+    desc: Slot para conteúdo principal.
+
+  title:
+    desc: Slot para o titulo.
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: Boolean
+
+selectors:
+  drawer-close-btn:
+    desc: Seletor do botão de fechar.
+    examples: ['data-cy="drawer-close-btn"']
+
+  drawer-default:
+    desc: Seletor do botão conteúdo do slot default.
+    examples: ['data-cy="drawer-default"']
+
+  drawer-title:
+    desc: Seletor do titulo.
+    examples: ['data-cy="drawer-title"']

package/src/components/infinite-scroll/QasInfiniteScroll.vue

@@ -62,7 +62,7 @@ const props = defineProps({
 
 defineExpose({ refresh, remove })
 
-const emit = defineEmits(['update:list'])
+const emit = defineEmits(['update:list', 'fetch-success', 'fetch-error'])
 
 const axios = inject('axios')
 
@@ -135,10 +135,14 @@ async function fetchList () {
      * após buscar uma vez e retornar uma lista vazia.
     */
     hasMadeFirstFetch.value = true
-  } catch {
+
+    emit('fetch-success', { list: newList, offset: offset.value, count: count.value })
+  } catch (error) {
     NotifyError('Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.')
 
     hasFetchingError.value = true
+
+    emit('fetch-error', error)
   } finally {
     isFetching.value = false
   }

package/src/components/infinite-scroll/QasInfiniteScroll.yml

@@ -44,6 +44,28 @@ events:
         desc: Novo valor do list
         type: Array
 
+  '@fetch-error -> function (error)':
+    desc: Dispara toda vez que ocorre algum erro ao fazer nova busca na API.
+    params:
+      error:
+        count: Erro enviado da API.
+        type: Object
+
+  '@fetch-success -> function ({ count, list, offset })':
+    desc: Dispara toda vez que é feito uma nova busca com sucesso na API.
+    params:
+      count:
+        count: Tamanho máximo de itens.
+        type: Number
+
+      list:
+        desc: Lista do endpoint.
+        type: Array
+
+      offset:
+        desc: valor atual que indica a posição inicial ao recuperar resultados da lista.
+        type: Number
+
 slots:
   default:
     desc: slot para exibir a lista na qual o componente fez a busca.

package/src/components/layout/QasLayout.vue

@@ -1,11 +1,11 @@
 <template>
   <q-layout view="hHh Lpr lff">
     <slot v-if="$qas.screen.untilLarge" name="app-bar">
-      <qas-app-bar v-bind="appBarProps" @sign-out="signOut" @toggle-menu="toggleMenuDrawer" />
+      <qas-app-bar v-bind="appBarProps" @sign-out="signOut" @toggle-menu="toggleMenuDrawer" @toggle-notifications="toggleNotificationsDrawer" />
     </slot>
 
     <slot name="app-menu">
-      <qas-app-menu :model-value="showMenuDrawer" v-bind="defaultAppMenuProps" @sign-out="signOut" @update:model-value="updateMenuDrawer" />
+      <qas-app-menu :model-value="showMenuDrawer" v-bind="defaultAppMenuProps" @sign-out="signOut" @toggle-notifications="toggleNotificationsDrawer" @update:model-value="updateMenuDrawer" />
     </slot>
 
     <slot>
@@ -17,72 +17,103 @@
     </slot>
 
     <q-ajax-bar color="primary" position="bottom" size="2px" />
+
+    <pv-layout-notifications-drawer v-if="isNotificationsEnabled" v-model="notificationsDrawer" />
   </q-layout>
 </template>
 
-<script>
+<script setup>
+import PvLayoutNotificationsDrawer from './private/PvLayoutNotificationsDrawer.vue'
 import QasAppBar from '../app-bar/QasAppBar.vue'
 import QasAppMenu from '../app-menu/QasAppMenu.vue'
 
-export default {
-  name: 'QasLayout',
+import useScreen from '../../composables/use-screen'
+import useNotifications from '../../composables/use-notifications'
 
-  components: {
-    QasAppBar,
-    QasAppMenu
-  },
+import { computed, ref, watch } from 'vue'
 
-  props: {
-    appBarProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    appMenuProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    modelValue: {
-      default: true,
-      type: Boolean
-    }
-  },
+defineOptions({ name: 'QasLayout' })
 
-  emits: ['sign-out', 'update:modelValue'],
+const props = defineProps({
+  appBarProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-  data () {
-    return {
-      menuDrawer: false
-    }
+  appMenuProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  computed: {
-    defaultAppMenuProps () {
-      return {
-        ...this.appBarProps,
-        ...this.appMenuProps
-      }
-    },
-
-    showMenuDrawer () {
-      return !this.$qas.screen.untilLarge || this.menuDrawer
-    }
+  initialUnreadNotificationsCount: {
+    type: Number,
+    default: 0
   },
 
-  methods: {
-    signOut () {
-      this.$emit('sign-out')
-    },
+  modelValue: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['sign-out', 'update:modelValue'])
+
+// expondo método "toggleNotificationsDrawer" para fora do componente.
+defineExpose({ toggleNotificationsDrawer })
+
+const screen = useScreen()
+
+const { isNotificationsEnabled, setUnreadNotificationsCount } = useNotifications()
+
+const menuDrawer = ref(false)
+const notificationsDrawer = ref(false)
+
+/**
+ * Como está sendo utilizado em um watcher com a propriedade 'immediate: true',
+ * é necessário criar a variável antes de atribuí-la ao watcher, para assim conseguir pará-lo.
+ */
+let unreadNotificationsCountWatcher = () => {}
 
-    toggleMenuDrawer () {
-      this.updateMenuDrawer(!this.menuDrawer)
-    },
+// computed
+const defaultAppMenuProps = computed(() => {
+  return {
+    ...props.appBarProps,
+    ...props.appMenuProps
+  }
+})
+
+const showMenuDrawer = computed(() => !screen.untilLarge || menuDrawer.value)
+
+/**
+ * A propriedade "initialUnreadNotificationsCount" é escutada apenas uma vez,
+ * quando ela é iniciada, seta o "unreadNotificationsCount" do composable,
+ * após isto quem controla é o QasLayout.
+ */
+unreadNotificationsCountWatcher = watch(() => props.initialUnreadNotificationsCount, value => {
+  if (value) {
+    setUnreadNotificationsCount(value)
 
-    updateMenuDrawer (value) {
-      this.menuDrawer = value
-      this.$emit('update:modelValue', value)
-    }
+    // finaliza o watcher
+    unreadNotificationsCountWatcher()
   }
+}, { immediate: true })
+
+// functions
+function signOut () {
+  emit('sign-out')
+}
+
+function toggleMenuDrawer () {
+  updateMenuDrawer(!menuDrawer.value)
+}
+
+function updateMenuDrawer (value) {
+  menuDrawer.value = value
+
+  emit('update:modelValue', value)
+}
+
+function toggleNotificationsDrawer () {
+  notificationsDrawer.value = !notificationsDrawer.value
 }
 </script>

package/src/components/layout/QasLayout.yml

@@ -14,6 +14,11 @@ props:
     default: { animation: 500 }
     type: Object
 
+  initial-unread-notifications-count:
+    desc: Propriedade para indicar quantas notificações não lidas existem.
+    default: 0
+    type: Number
+
   model-value:
     desc: Model do componente, responsável por abrir/fechar menu lateral.
     default: true

package/src/components/layout/private/PvLayoutNotificationCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="items-center justify-between no-wrap row">
+    <div class="items-center row">
+      <div class="q-mr-sm">
+        <q-icon :color="iconColor" name="sym_r_info" size="md" />
+      </div>
+
+      <div>
+        <span class="text-caption text-grey-6">
+          {{ dateLabel }}
+        </span>
+
+        <div class="items-center q-mt-xs row">
+          <h6 class="text-subtitle1" :class="titleClass">
+            {{ props.notification.title }}
+          </h6>
+
+          <div v-if="hasBadge" class="q-ml-sm">
+            <qas-badge color="indigo-1" label="Nova" text-color="grey-10" />
+          </div>
+        </div>
+
+        <div class="q-mt-xs text-body1 text-grey-8">
+          {{ props.notification.message }}
+        </div>
+      </div>
+    </div>
+
+    <qas-btn v-if="props.notification.link" v-bind="buttonProps" />
+  </div>
+</template>
+
+<script setup>
+import { dateTime } from '../../../helpers/filters'
+
+import { computed } from 'vue'
+import { date } from 'quasar'
+
+defineOptions({ name: 'PvLayoutNotificationCard' })
+
+const props = defineProps({
+  notification: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const markedAsRead = computed(() => props.notification.isRead)
+
+const iconColor = computed(() => markedAsRead.value ? 'grey-8' : 'primary')
+const titleClass = computed(() => markedAsRead.value ? 'text-grey-8' : 'text-grey-10')
+
+const isRecentNotification = computed(() => {
+  const currentDate = new Date().toISOString()
+
+  return date.getDateDiff(currentDate, props.notification.createdAt, 'minutes') < 10
+})
+
+const hasBadge = computed(() => isRecentNotification.value && !markedAsRead.value)
+
+const dateLabel = computed(() => {
+  return isRecentNotification.value
+    ? 'Agora mesmo'
+    : dateTime(props.notification.createdAt, 'dd/MM/yyyy HH:mm')
+})
+
+const buttonProps = computed(() => {
+  const { link } = props.notification
+
+  const urlFromLink = new URL(link)
+
+  const isExternalURL = urlFromLink.host !== location.host
+
+  return {
+    icon: 'sym_r_chevron_right',
+    color: markedAsRead.value ? 'grey-10' : 'primary',
+
+    /**
+     * Se for uma url externa, diferente da URL que ele esta acessando no momento,
+     * é adicionado um "href" porque é um link para outro modulo, caso seja para o mesmo modulo,
+     * é adicionado um "to" para não recarregar a pagina.
+     */
+    ...(isExternalURL ? { href: link } : { to: urlFromLink.pathname })
+  }
+})
+</script>

package/src/components/layout/private/PvLayoutNotificationsDrawer.vue

@@ -0,0 +1,141 @@
+<template>
+  <qas-drawer v-bind="drawerProps" v-model="model">
+    <div class="fixed-position">
+      <div class="justify-end row">
+        <qas-btn class="q-mb-xl" :disable="isAllNotificationsRead" icon="sym_r_check_circle" label="Marcar todas como lida" @click="markAsRead" />
+      </div>
+
+      <qas-infinite-scroll v-model:list="notifications" v-bind="infiniteScrollProps">
+        <qas-list-items :list="notifications" :use-box="false" :use-clickable-item="false" :use-section-actions="false">
+          <template #item-section="{ item }">
+            <pv-layout-notification-card :notification="item" />
+          </template>
+        </qas-list-items>
+      </qas-infinite-scroll>
+    </div>
+  </qas-drawer>
+</template>
+
+<script setup>
+import PvLayoutNotificationCard from './PvLayoutNotificationCard.vue'
+import QasDrawer from '../../drawer/QasDrawer.vue'
+import QasInfiniteScroll from '../../infinite-scroll/QasInfiniteScroll.vue'
+
+import useNotifications, { onNotificationReceived } from '../../../composables/use-notifications'
+
+import { promiseHandler } from '../../../helpers'
+
+import { computed, ref, inject, onMounted } from 'vue'
+
+defineOptions({ name: 'PvLayoutNotificationsDrawer' })
+
+const props = defineProps({
+  model: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const axios = inject('axios')
+
+const { setUnreadNotificationsCount } = useNotifications()
+
+const hasMadeFirstFetch = ref(false)
+const isMarkingNotificationsAsRead = ref(false)
+
+const notifications = ref([])
+
+onMounted(() => {
+  const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
+
+  notificationsUtilsChannel.onmessage = ({ data }) => {
+    if (data.type === 'markAllAsRead') onMarkAsReadSuccess()
+  }
+})
+
+/**
+ * Quando o usuário ainda não abriu a central de notificações, a primeira vez que
+ * ele abrir vai obter esses dados via API, mesmo que ele tenha recebido a notificação
+ * em real time, após ele ter aberto as notificações pelo menos uma vez, todas
+ * notificações recebidas em real time serão incrementadas na central de
+ * notificação sem a necessidade de chamar a API e resetar a paginação (feita por scroll).
+ */
+onNotificationReceived(notification => {
+  if (!hasMadeFirstFetch.value) return
+
+  notifications.value.unshift(notification)
+})
+
+const infiniteScrollProps = {
+  limitPerPage: 30,
+  // os "165px" são referentes ao cabeçalho.
+  maxHeight: 'calc(100vh - 165px)',
+  url: 'users/me/notifications',
+  onFetchSuccess
+}
+
+// computed
+const model = computed({
+  get () {
+    return props.model
+  },
+
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const drawerProps = computed(() => {
+  return {
+    loading: isMarkingNotificationsAsRead.value,
+    maxWidth: '60%',
+    title: 'Notificações'
+  }
+})
+
+/**
+ * Se todas notificações estiverem lidas, então desabilitar o botão de "Marcar todas como lida"
+ */
+const isAllNotificationsRead = computed(() => !notifications.value.some(notification => !notification?.isRead))
+
+// functions
+async function markAsRead () {
+  const { data } = await promiseHandler(
+    axios.patch('/users/me/notifications', { markAllAsRead: true }),
+    {
+      useLoading: false,
+      errorMessage: 'Falha ao marcar todas notificações como lida. Por favor, tente novamente em alguns minutos.',
+      onLoading: isLoading => {
+        isMarkingNotificationsAsRead.value = isLoading
+      }
+    }
+  )
+
+  if (data) {
+    const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
+
+    notificationsUtilsChannel.postMessage({ type: 'markAllAsRead' })
+  }
+}
+
+/**
+ * Ao marcar todas notificações como lida, é necessário percorrer todo o array
+ * de "notifications" e setar a prop "isRead" como "true", para não precisar chamar
+ * novamente a API para atualizar estes dados.
+ */
+function onMarkAsReadSuccess () {
+  notifications.value.forEach(notification => {
+    notification.isRead = true
+  })
+
+  /**
+   * Zera o contador de notificações, responsável pelo ícone no QasAppUser.
+   */
+  setUnreadNotificationsCount(0)
+}
+
+function onFetchSuccess () {
+  hasMadeFirstFetch.value = true
+}
+</script>

package/src/components/list-items/QasListItems.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-box class="qas-list-items">
+  <component :is="component" class="qas-list-items" :class="classes">
     <q-list separator>
       <q-item v-for="(item, index) in props.list" :key="index" v-ripple :clickable="props.useClickableItem" @click="onClick({ item, index }, true)">
         <slot :index="index" :item="item" name="item">
@@ -15,13 +15,14 @@
         </slot>
       </q-item>
     </q-list>
-  </qas-box>
+  </component>
 </template>
 
 <script setup>
-import QasBox from '../box/QasBox.vue'
 import QasBtn from '../btn/QasBtn.vue'
 
+import { computed } from 'vue'
+
 defineOptions({ name: 'QasListItems' })
 
 const props = defineProps({
@@ -35,6 +36,11 @@ const props = defineProps({
     type: Array
   },
 
+  useBox: {
+    type: Boolean,
+    default: true
+  },
+
   useClickableItem: {
     type: Boolean
   },
@@ -47,6 +53,10 @@ const props = defineProps({
 
 const emit = defineEmits(['click-item'])
 
+const classes = computed(() => ({ 'qas-list-items--no-click': !props.useClickableItem }))
+
+const component = computed(() => props.useBox ? 'qas-box' : 'div')
+
 function onClick ({ item, index }, fromItem) {
   /**
    * se o click veio do q-item e "useClickableItem" for "false", ou
@@ -62,8 +72,26 @@ function onClick ({ item, index }, fromItem) {
 
 <style lang="scss">
 .qas-list-items {
-  .q-list > .q-item {
-    padding: 24px 16px;
+  &--no-click {
+    .q-item {
+      .q-ripple {
+        display: none;
+      }
+    }
+  }
+
+  .q-list {
+    & > .q-item {
+      padding: var(--qas-spacing-lg) 0;
+    }
+
+    & > .q-item:last-child {
+      padding-bottom: 0;
+    }
+
+    & > .q-item:first-child {
+      padding-top: 0;
+    }
   }
 }
 </style>

package/src/components/list-items/QasListItems.yml

@@ -14,6 +14,11 @@ props:
     default: []
     type: Array
 
+  use-box:
+    desc: Controla se o vai ser um QasBox ou div.
+    type: Boolean
+    default: true
+
   use-clickable-item:
     desc: Controla se o item inteiro é clicável ou somente o button dentro do item.
     type: Boolean

package/src/composables/index.js

@@ -3,3 +3,6 @@ export { default as useForm } from './use-form.js'
 export { default as useHistory } from './use-history.js'
 export { default as useQueryCache } from './use-query-cache.js'
 export { default as useScreen } from './use-screen.js'
+export { default as useNotifications } from './use-notifications.js'
+
+export * from './use-notifications.js'

package/src/composables/use-notifications.js

@@ -0,0 +1,114 @@
+import asteroidConfig from 'asteroid-config'
+import hasParentByClassName from '../helpers/private/has-parent-by-class-name'
+
+import { Notify } from 'quasar'
+import { ref } from 'vue'
+
+const callbackFunctions = {
+  onNotificationReceived: []
+}
+
+export function onNotificationReceived (callbackFn) {
+  callbackFunctions.onNotificationReceived.push(callbackFn)
+}
+
+const unreadNotificationsCount = ref(0)
+
+export default function () {
+  const isNotificationsEnabled = asteroidConfig.framework.featureToggle?.useNotifications
+
+  function triggerNotification (notification) {
+    callbackFunctions.onNotificationReceived.forEach(fn => fn((notification)))
+  }
+
+  function setUnreadNotificationsCount (value) {
+    unreadNotificationsCount.value = value
+  }
+
+  function incrementUnreadNotificationsCount () {
+    unreadNotificationsCount.value++
+  }
+
+  /**
+   * @param {{
+   *  message: string
+   *  title: string
+   *  link?: string
+   * }} config
+   */
+  function sendNotify (config = {}) {
+    const { link } = config
+
+    const classes = ['bg-white', 'boot-notification', 'q-py-sm', 'text-grey-8']
+
+    if (link) classes.push(...['boot-notification--has-link', 'cursor-pointer'])
+
+    const closeNotify = Notify.create({
+      actions: [{
+        icon: 'sym_r_close',
+        class: 'boot-notification__close-button qas-btn qas-btn--tertiary qas-btn--tertiary-grey-10'
+      }],
+
+      attrs: {
+        onClick: event => onNotifyClick({ event, link, closeNotify })
+      },
+
+      classes: classes.join(' '),
+      html: true,
+      icon: 'sym_r_info',
+      iconColor: 'primary',
+      message: getHTMLMessage(config),
+      multiLine: true,
+      position: 'bottom-right',
+      timeout: 30000
+    })
+
+    /**
+     * Função que é chamada quando o usuário clica na notificação, se a notificação
+     * tem link, então ele vai ser redirecionado para o link em uma nova aba, caso
+     * não tenha link, nada acontece.
+     */
+    function onNotifyClick ({ event, link, closeNotify }) {
+      if (!link) return
+
+      if (hasParentByClassName('boot-notification__close-button', event.srcElement)) return
+
+      window.open(link)
+
+      closeNotify()
+    }
+
+    /**
+     * Função que retorna um HTML para seguir estilos propostos pelo design.
+     */
+    function getHTMLMessage ({ message, title, icon = 'info' } = {}) {
+      return (`
+         <div>
+           <header class="row items-center">
+             <h5 class="text-grey-10 text-h5 boot-notification__title">
+               ${title}
+             </h5>
+           </header>
+
+           <div class="q-mt-sm text-grey-8 text-body1">
+             ${message}
+           </div>
+         </div>
+      `)
+    }
+  }
+
+  return {
+    // const
+    isNotificationsEnabled,
+
+    // computed
+    unreadNotificationsCount,
+
+    // functions
+    incrementUnreadNotificationsCount,
+    sendNotify,
+    setUnreadNotificationsCount,
+    triggerNotification
+  }
+}

package/src/css/plugins/notify.scss

@@ -1,6 +1,8 @@
 .q-notification {
-  margin-top: 80px;
-  max-width: 560px;
+  &:not(.boot-notification).qas-notification {
+    margin-top: 80px;
+    max-width: 560px;
+  }
 
   &.qas-notification {
     &--error::before,
@@ -56,6 +58,42 @@
     }
   }
 
+  &.boot-notification {
+    // classe do quasar adc fixo 10px de margin-bottom
+    margin-top: 0;
+    margin-bottom: calc(var(--qas-spacing-xl) - 10px);
+    max-width: 480px;
+    width: calc(100% - 20px);
+
+    &--has-link {
+      transition: var(--qas-generic-transition);
+
+      &:not(:has(.boot-notification__close-button:hover)):hover .boot-notification__title {
+        color: var(--q-primary) !important;
+      }
+    }
+
+    .boot-notification__close-button {
+      position: absolute;
+      right: calc(var(--qas-spacing-sm) * -1);
+      top: 0;
+    }
+
+    .q-notification__wrapper {
+      position: relative;
+
+      &::before {
+        background-color: var(--q-primary);
+        bottom: calc((var(--qas-spacing-sm)) * -1);
+        content: '';
+        left: calc((var(--qas-spacing-md)) * -1);
+        position: absolute;
+        top: calc((var(--qas-spacing-sm)) * -1);
+        width: 4px;
+      }
+    }
+  }
+
   @media (max-width: $breakpoint-xs) {
     margin-top: 40px;
   }

package/src/helpers/private/has-parent-by-class-name.js

@@ -0,0 +1,15 @@
+/**
+ * Função que retorna se o elemento passado é filho do elemento especificado
+ * pelo nome da classe.
+ */
+export default function (className, element) {
+  while (element.parentElement) {
+    const hasParentElement = element.parentElement.classList.contains(className)
+
+    if (hasParentElement) return true
+
+    element = element.parentElement
+  }
+
+  return false
+}

package/src/vue-plugin.js

@@ -19,6 +19,7 @@ import QasDebugger from './components/debugger/QasDebugger.vue'
 import QasDelete from './components/delete/QasDelete.vue'
 import QasDialog from './components/dialog/QasDialog.vue'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
+import QasDrawer from './components/drawer/QasDrawer.vue'
 import QasEmptyResultText from './components/empty-result-text/QasEmptyResultText.vue'
 import QasField from './components/field/QasField.vue'
 import QasFilters from './components/filters/QasFilters.vue'
@@ -105,6 +106,7 @@ async function install (app) {
   app.component('QasDelete', QasDelete)
   app.component('QasDialog', QasDialog)
   app.component('QasDialogRouter', QasDialogRouter)
+  app.component('QasDrawer', QasDrawer)
   app.component('QasEmptyResultText', QasEmptyResultText)
   app.component('QasField', QasField)
   app.component('QasFilters', QasFilters)
@@ -193,6 +195,7 @@ export {
   QasDelete,
   QasDialog,
   QasDialogRouter,
+  QasDrawer,
   QasEmptyResultText,
   QasField,
   QasFilters,