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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.14.0-beta.1",
+  "version": "3.14.0-beta.10",
   "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/chart-view/QasChartView.vue

@@ -11,7 +11,7 @@
     </template>
 
     <template #right>
-      <qas-filters v-bind="chartFiltersProps" v-model:currentFilters="filters" />
+      <qas-filters v-bind="chartFiltersProps" />
     </template>
   </qas-header-actions>
 
@@ -74,6 +74,11 @@ export default {
   },
 
   props: {
+    beforeFetch: {
+      default: null,
+      type: Function
+    },
+
     entity: {
       required: true,
       type: String
@@ -137,6 +142,7 @@ export default {
 
   data () {
     return {
+      cancelBeforeFetch: false,
       data: [],
       filters: {},
       isFetched: false,
@@ -199,7 +205,12 @@ export default {
         useSpacing: false,
         useUpdateRoute: false,
 
-        ...this.filtersProps
+        ...this.filtersProps,
+
+        'onUpdate:currentFilters': filters => {
+          this.filters = filters
+          this.filtersProps['onUpdate:currentFilters']?.(filters)
+        }
       }
     },
 
@@ -296,7 +307,7 @@ export default {
 
   watch: {
     filters () {
-      this.fetchData()
+      this.handleFetchData()
     },
 
     isFetching (value) {
@@ -306,7 +317,7 @@ export default {
 
   created () {
     this.registerChartJS()
-    this.fetchData()
+    this.handleFetchData()
   },
 
   unmounted () {
@@ -314,17 +325,34 @@ export default {
   },
 
   methods: {
-    async fetchData () {
+    handleFetchData () {
+      const hasBeforeFetch = typeof this.beforeFetch === 'function'
+      const payload = {
+        url: this.url,
+        filters: this.filters
+      }
+
+      if (hasBeforeFetch && !this.cancelBeforeFetch) {
+        return this.beforeFetch({
+          payload,
+          resolve: this.fetchData,
+          done: () => {
+            this.cancelBeforeFetch = true
+          }
+        })
+      }
+
+      this.fetchData(payload)
+    },
+
+    async fetchData (payload = {}) {
       try {
         this.isFetching = true
 
         const response = await getAction.call(this, {
           entity: this.entity,
           key: 'fetchList',
-          payload: {
-            url: this.url,
-            filters: this.filters
-          }
+          payload
         })
 
         const { results } = response.data

package/src/components/chart-view/QasChartView.yml

@@ -4,6 +4,12 @@ meta:
   desc: Componente responsável pela renderização de gráficos
 
 props:
+  before-fetch:
+    desc: Callback para controlar o fetch de dados interno do componente.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true

package/src/components/date/QasDate.vue

@@ -447,13 +447,10 @@ function onNavigation (date) {
   &__event {
     @include set-typography($caption);
 
-    bottom: -6px;
     color: $primary;
     font-size: 10px !important;
-    height: 20px;
-    left: 50%;
-    position: absolute;
-    transform: translateX(-50%);
+    line-height: 1;
+    transition: color var(--qas-generic-transition);
     width: 100%;
 
     &--pointer {
@@ -472,6 +469,10 @@ function onNavigation (date) {
     width: 6px;
   }
 
+  .q-date__calendar-item {
+    vertical-align: initial;
+  }
+
   &--inative {
     .q-date {
       &__calendar-item--out,
@@ -479,10 +480,11 @@ function onNavigation (date) {
         @include set-typography($subtitle2);
 
         color: $grey-4;
+        line-height: 1;
         visibility: unset;
 
         span {
-          height: 36px;
+          height: auto;
           padding: var(--qas-spacing-xs);
         }
       }
@@ -493,31 +495,19 @@ function onNavigation (date) {
     }
   }
 
-  &__calendar-item-event {
-    .q-btn {
-      &.bg-primary span {
-        padding-bottom: 4px;
-      }
+  .q-date {
+    &__navigation {
+      justify-content: space-between;
 
-      &.bg-primary .qas-date__event {
-        bottom: -2px;
+      > div:last-child,
+      > div:first-child {
+        min-width: auto;
+        width: auto;
       }
 
-      &.bg-primary .qas-date__event--pointer {
-        bottom: -2px;
+      > div:first-child {
+        min-width: 120px;
       }
-    }
-  }
-
-  .q-date__navigation > div:last-child,
-  .q-date__navigation > div:first-child {
-    min-width: auto;
-    width: auto;
-  }
-
-  .q-date {
-    &__navigation {
-      justify-content: space-between;
 
       .q-btn {
         @include set-button(tertiary, false, false, grey-10);
@@ -566,14 +556,15 @@ function onNavigation (date) {
       min-height: auto;
 
       .q-btn {
-        border: 0;
+        @include set-typography($subtitle2);
+
+        border: 1px solid transparent;
         border-radius: $generic-border-radius;
         box-shadow: none;
-        height: 36px !important;
-        min-height: 30px;
-        min-width: 30px;
+        height: auto !important;
+        line-height: 1;
+        min-width: min-content;
         transition: color var(--qas-generic-transition);
-        width: 30px !important;
 
         .q-ripple,
         .q-focus-helper {
@@ -592,12 +583,17 @@ function onNavigation (date) {
           color: var(--q-primary-contrast);
         }
 
-        @include set-typography($subtitle2);
-      }
-    }
+        &.bg-primary,
+        &.q-date__today {
+          border-color: $primary;
+          border-radius: $generic-border-radius;
+          font-weight: 700;
+        }
 
-    &__today {
-      color: $primary;
+        &.q-date__today {
+          color: $primary;
+        }
+      }
     }
   }
 }

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>