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

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.4",
   "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/date/QasDate.vue

@@ -447,14 +447,11 @@ 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%);
     width: 100%;
+    line-height: 1;
+    transition: color var(--qas-generic-transition);
 
     &--pointer {
       bottom: -6px;
@@ -472,6 +469,10 @@ function onNavigation (date) {
     width: 6px;
   }
 
+  .q-date__calendar-item {
+    vertical-align: initial;
+  }
+
   &--inative {
     .q-date {
       &__calendar-item--out,
@@ -493,31 +494,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 +555,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;
+        width: 26px !important;
         transition: color var(--qas-generic-transition);
-        width: 30px !important;
 
         .q-ripple,
         .q-focus-helper {
@@ -592,12 +582,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>

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"']