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

package/package.json

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

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

@@ -9,7 +9,9 @@
             </q-item-section>
 
             <q-item-section>
-              <div>{{ item.label }}</div>
+              <div>
+                {{ item.label }}
+              </div>
             </q-item-section>
           </q-item>
         </slot>
@@ -86,7 +88,7 @@ const { deleteBtnProps, hasDelete } = useDelete()
 const fullList = computed(() => {
   return {
     ...props.list,
-    ...deleteBtnProps
+    ...deleteBtnProps.value
   }
 })
 
@@ -189,20 +191,20 @@ function onClick (item = {}) {
 
 // ------------------------------- composables ---------------------------------
 function useDelete () {
-  const deleteBtnProps = {}
-
   const hasDelete = computed(() => !!Object.keys(props.deleteProps).length)
 
-  if (hasDelete.value) {
-    Object.assign(deleteBtnProps, {
-      delete: {
-        color: 'grey-10',
-        icon: props.deleteIcon,
-        label: props.deleteLabel,
-        handler: () => qas.delete(props.deleteProps)
-      }
-    })
-  }
+  const deleteBtnProps = computed(() => {
+    return {
+      ...(hasDelete.value && {
+        delete: {
+          color: 'grey-10',
+          icon: props.deleteIcon,
+          label: props.deleteLabel,
+          handler: () => qas.delete(props.deleteProps)
+        }
+      })
+    }
+  })
 
   return {
     deleteBtnProps,

package/src/components/alert/QasAlert.vue

@@ -5,7 +5,7 @@
 
       <div class="text-body1 text-white">
         <slot>
-          {{ text }}
+          {{ props.text }}
         </slot>
       </div>
 

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

@@ -5,9 +5,9 @@
 
       <q-toolbar-title>
         <router-link class="flex items-center no-wrap text-no-decoration" :class="routerLinkClass" :to="rootRoute">
-          <img v-if="brand" :alt="title" class="qas-app-bar__brand" :src="brand">
+          <img v-if="props.brand" :alt="props.title" class="qas-app-bar__brand" :src="props.brand">
 
-          <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
+          <span v-else class="ellipsis text-bold text-primary">{{ props.title }}</span>
 
           <q-badge v-if="hasDevelopmentBadge" class="q-ml-sm" color="red" :label="developmentBadgeLabel" />
         </router-link>
@@ -54,7 +54,7 @@ const props = defineProps({
   }
 })
 
-const emits = 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
   }
 })
@@ -93,11 +94,15 @@ const hasUser = computed(() => !!Object.keys(defaultAppUserProps.value.user || {
 const routerLinkClass = computed(() => screen.isSmall && 'justify-center')
 
 function signOut () {
-  emits('sign-out')
+  emit('sign-out')
+}
+
+function toggleNotifications () {
+  emit('toggle-notifications')
 }
 
 function toggleMenuDrawer () {
-  emits('toggle-menu')
+  emit('toggle-menu')
 }
 </script>
 

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

@@ -6,9 +6,9 @@
           <!-- Brand -->
           <div v-if="!screen.untilLarge" class="q-mb-xl q-pt-xl qas-app-menu__label" :class="classes.spacedItem">
             <router-link class="column flex items-center justify-center relative-position text-no-decoration" :to="rootRoute">
-              <q-img v-if="normalizedBrand" :alt="title" class="qas-app-menu__brand qas-app-menu__label" fit="contain" height="27px" img-class="qas-app-menu__brand-img" no-spinner :src="normalizedBrand" />
+              <q-img v-if="normalizedBrand" :alt="props.title" class="qas-app-menu__brand qas-app-menu__label" fit="contain" height="27px" img-class="qas-app-menu__brand-img" no-spinner :src="normalizedBrand" />
 
-              <span v-else-if="!isMiniMode" class="ellipsis text-bold text-primary text-subtitle2">{{ title }}</span>
+              <span v-else-if="!isMiniMode" class="ellipsis text-bold text-primary text-subtitle2">{{ props.title }}</span>
 
               <q-badge v-if="hasDevelopmentBadge" class="q-mt-sm" color="red" :label="developmentBadgeLabel" />
             </router-link>
@@ -30,8 +30,8 @@
           </div>
 
           <!-- List -->
-          <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-10">
-            <template v-for="(menuItem, index) in items">
+          <q-list v-if="props.items.length" class="q-mt-xl qas-app-menu__menu text-grey-10">
+            <template v-for="(menuItem, index) in props.items">
               <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content" :class="classes.content">
                 <q-item class="ellipsis items-center q-py-none qas-app-menu__item qas-app-menu__item--label-mini text-weight-bold">
                   <div class="ellipsis qas-app-menu__label text-grey-10 text-subtitle2" :class="classes.spacedItem">
@@ -146,7 +146,7 @@ const props = defineProps({
   }
 })
 
-const emits = 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: () => emits('sign-out')
+  onSignOut: () => emit('sign-out'),
+  onToggleNotifications: () => emit('toggle-notifications')
 }
 
 const { defaultAppUserProps, showAppUser } = useAppUser(composableParams)
@@ -172,7 +173,7 @@ const model = computed({
   },
 
   set (value) {
-    emits('update:modelValue', value)
+    emit('update:modelValue', value)
   }
 })
 
@@ -195,7 +196,7 @@ const classes = computed(() => {
 
 // métodos
 function closeDrawer () {
-  emits('update:modelValue', false)
+  emit('update:modelValue', false)
 }
 
 function getNormalizedPath (path) {

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-menu/private/PvAppMenuDropdown.vue

@@ -2,7 +2,7 @@
   <div class="pv-app-menu-dropdown">
     <qas-btn-dropdown v-bind="defaultButtonDropdownProps">
       <q-list>
-        <q-item v-for="item in modules" :key="item" :active="isActive(item)" active-class="text-primary" :href="item.value">
+        <q-item v-for="item in props.modules" :key="item" :active="isActive(item)" active-class="text-primary" :href="item.value">
           <q-item-section v-if="item.icon" avatar>
             <q-icon :name="item.icon" />
           </q-item-section>

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

@@ -1,11 +1,9 @@
 <template>
   <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row" data-cy="app-user">
     <div class="relative-position">
-      <qas-avatar :image="user.photo" :size="avatarSize" :title="userName" />
+      <qas-avatar :image="props.user.photo" :size="props.avatarSize" :title="userName" />
 
-      <q-badge v-if="hasNotifications" color="red" floating>
-        {{ notifications.count }}
-      </q-badge>
+      <qas-avatar v-if="hasNotificationInUserAvatar" v-bind="avatarNotificationCountProps" />
     </div>
 
     <div class="ellipsis qas-app-user__data">
@@ -14,26 +12,26 @@
       </div>
 
       <div class="ellipsis qas-app-user__email text-grey-8">
-        {{ user.email }}
+        {{ props.user.email }}
       </div>
     </div>
 
-    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="menuProps" @hide="onMenuHide">
+    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="props.menuProps" @hide="onMenuHide">
       <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="64px" :title="userName" />
+        <qas-avatar class="q-mb-md" :image="props.user.photo" size="64px" :title="userName" />
 
         <div class="ellipsis qas-app-user__menu-name">
           {{ userName }}
         </div>
 
         <div class="ellipsis">
-          {{ user.email }}
+          {{ props.user.email }}
         </div>
 
         <qas-select v-if="hasCompaniesSelect" v-bind="defaultCompanyProps" v-model="companiesModel" class="q-my-md" data-cy="app-user-companies-select" @update:model-value="setCompanies" />
 
         <q-list class="q-mt-md">
-          <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="user.to">
+          <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="props.user.to">
             <q-item-section avatar>
               <q-icon name="sym_r_person" />
             </q-item-section>
@@ -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">
-                {{ 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 emits = 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,9 +142,44 @@ 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 () {
-  emits('sign-out')
+  emit('sign-out')
 }
 
 async function setCompanies (value) {
@@ -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,8 +1,8 @@
 <template>
   <q-avatar class="text-bold" v-bind="attributes">
-    <q-img v-if="hasImage" :alt="title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="image" @error="onImageLoadedError" />
-    <template v-else-if="hasTitle">{{ firstLetter }}</template>
-    <q-icon v-else :name="icon" />
+    <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">{{ 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/breakline/QasBreakline.vue

@@ -1,16 +1,14 @@
 <template>
-  <component :is="tag" v-for="(line, index) in lines" :key="index" v-bind="$attrs">
+  <component :is="props.tag" v-for="(line, index) in lines" :key="index" v-bind="attrs">
     {{ line }}
   </component>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 import { getSlotChildrenText } from '../../helpers'
 
-defineOptions({
-  name: 'QasBreakline'
-})
+defineOptions({ name: 'QasBreakline' })
 
 const props = defineProps({
   split: {
@@ -29,7 +27,8 @@ const props = defineProps({
   }
 })
 
-const slots = defineSlots()
+const attrs = useAttrs()
+const slots = useSlots()
 
 const lines = computed(() => {
   const text = props.text || getSlotChildrenText(slots.default())