@bildvitta/quasar-ui-asteroid 3.17.0 → 3.18.0-beta.1

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

@@ -1,10 +1,11 @@
 <template>
   <div class="qas-app-menu">
-    <q-drawer :key="reRenderCount" v-model="model" :behavior="behavior" class="shadow-2" :mini="isMiniMode" :mini-width="88" show-if-above :width="drawerWidth" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent">
+    <q-drawer :key="reRenderCount" v-model="model" :behavior="behavior" class="shadow-2" :mini="isMiniMode" :mini-width="88" show-if-above :width="drawerWidth">
       <div class="column full-height justify-between no-wrap">
-        <div class="full-width">
+        <!-- logo + select de módulos -->
+        <div class="full-width q-pb-lg" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent">
           <!-- Brand -->
-          <div v-if="!screen.untilLarge" class="q-mb-xl q-pt-xl qas-app-menu__label" :class="classes.spacedItem">
+          <div v-if="!screen.untilLarge" class="q-mb-lg q-pt-lg 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="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" />
 
@@ -18,76 +19,81 @@
             <q-separator />
           </div>
 
-          <div v-if="screen.untilLarge" class="q-pr-xl q-pt-md text-right">
+          <div v-if="screen.untilLarge" class="flex itens-center justify-between q-pt-md q-px-xl text-right">
+            <div>
+              <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="props.miniBrand" />
+            </div>
+
             <qas-btn color="grey-10" icon="sym_r_close" variant="tertiary" @click="closeDrawer" />
           </div>
 
           <!-- Module -->
-          <div v-if="showAppMenuDropdown" class="items-center justify-between no-wrap q-mt-xl qas-app-menu__label qas-app-menu__module row" :class="classes.spacedItem">
+          <div v-if="showAppMenuDropdown" class="items-center justify-between no-wrap q-mt-lg qas-app-menu__label qas-app-menu__module row" :class="classes.spacedItem">
             <div class="full-width text-center">
               <pv-app-menu-dropdown v-bind="appMenuDropdownProps" />
             </div>
           </div>
+        </div>
 
-          <!-- List -->
-          <q-list v-if="props.items.length" class="q-mt-xl qas-app-menu__menu text-grey-10" :class="menuClasses">
-            <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">
-                    {{ menuItem.label }}
-                  </div>
-                </q-item>
-
-                <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" class="qas-app-menu__children qas-app-menu__item qas-app-menu__item--children" :to="getRouterRedirect(menuChildItem)">
-                  <q-item-section v-if="menuChildItem.icon" avatar>
-                    <q-icon :name="menuChildItem.icon" />
-                  </q-item-section>
-
-                  <q-item-section>
-                    <q-item-label>
-                      <div class="ellipsis text-subtitle2">
-                        {{ menuChildItem.label }}
-                      </div>
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
-
-                <div v-if="hasSeparator(index)" class="qas-app-menu__label" :class="classes.spacedItem">
-                  <q-separator spaced />
+        <!-- lista do menu -->
+        <q-list v-if="normalizedItems.length" ref="list" class="qas-app-menu__menu text-grey-10" @mouseleave="onMouseEvent" @mousemove="onMouseMoveList">
+          <template v-for="(menuItem, index) in normalizedItems">
+            <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">
+                  {{ menuItem.label }}
                 </div>
-              </div>
+              </q-item>
 
-              <!-- quando tem children vazio, não deve mostrar label do item, e a label do item
-              não tem "to", então validar se tem "to" para mostrar o item -->
-              <q-item v-else-if="menuItem.to" :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
-                <q-item-section v-if="menuItem.icon" avatar>
-                  <q-icon :name="menuItem.icon" />
+              <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" class="qas-app-menu__children qas-app-menu__item qas-app-menu__item--children" :to="getRouterRedirect(menuChildItem)">
+                <q-item-section v-if="menuChildItem.icon" avatar>
+                  <q-icon :name="menuChildItem.icon" />
                 </q-item-section>
 
                 <q-item-section>
                   <q-item-label>
                     <div class="ellipsis text-subtitle2">
-                      {{ menuItem.label }}
+                      {{ menuChildItem.label }}
                     </div>
                   </q-item-label>
                 </q-item-section>
               </q-item>
-            </template>
-          </q-list>
-        </div>
 
-        <div v-if="showAppUser">
+              <div v-if="hasSeparator(index)" class="qas-app-menu__label" :class="classes.spacedItem">
+                <q-separator spaced />
+              </div>
+            </div>
+
+            <!-- quando tem children vazio, não deve mostrar label do item, e a label do item
+              não tem "to", então validar se tem "to" para mostrar o item -->
+            <q-item v-else-if="menuItem.to" :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
+              <q-item-section v-if="menuItem.icon" avatar>
+                <q-icon :name="menuItem.icon" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>
+                  <div class="ellipsis text-subtitle2">
+                    {{ menuItem.label }}
+                  </div>
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
+
+        <!-- usuário + chat ajuda -->
+        <div v-if="showAppUser" class="q-mt-auto" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent">
           <!-- Chat Ajuda -->
-          <q-list v-if="useChat" class="q-mt-xl">
-            <q-item class="q-mb-md text-primary" clickable @click="toggleChat">
+          <q-list v-if="useChat" class="q-mt-md">
+            <q-item class="q-pb-none" clickable @click="toggleChat">
               <q-item-section avatar>
-                <q-icon name="sym_r_chat" />
+                <q-icon color="primary" name="sym_r_chat" />
               </q-item-section>
 
               <q-item-section>
                 <q-item-label>
-                  <div class="ellipsis text-subtitle2">
+                  <div class="ellipsis text-primary text-subtitle2">
                     Solicitar ajuda
                   </div>
                 </q-item-label>
@@ -96,7 +102,7 @@
           </q-list>
 
           <!-- User -->
-          <div class="full-width q-pb-lg q-px-lg">
+          <div class="full-width q-mt-md q-pb-lg q-px-lg">
             <qas-app-user v-bind="defaultAppUserProps" />
           </div>
         </div>
@@ -115,10 +121,10 @@ import useDevelopmentBadge from './composables/use-development-badge'
 import { useScreen } from '../../composables'
 import { useAuthUser } from '../../composables/private'
 
-import { handleProcess } from '../../helpers'
+import { handleProcess, setScrollGradient } from '../../helpers'
 
 import Gleap from 'gleap'
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 
 defineOptions({
@@ -139,6 +145,11 @@ const props = defineProps({
     type: String
   },
 
+  homeRoute: {
+    type: [String, Object],
+    default: undefined
+  },
+
   items: {
     default: () => [],
     type: Array
@@ -172,22 +183,32 @@ const props = defineProps({
 
   useChat: {
     type: Boolean
+  },
+
+  useHomeItem: {
+    type: Boolean,
+    default: true
   }
 })
 
+// emits
 const emit = defineEmits(['sign-out', 'update:modelValue', 'toggle-notifications'])
 
+// composables
 const screen = useScreen()
 const router = useRouter()
 
 const { toggleChat } = useChatMenu()
 
-const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
-
+// refs
 const hasOpenedMenu = ref(false)
 const hasOpenedHelpChat = ref(false)
 const isMini = ref(screen.isLarge)
 const reRenderCount = ref(0)
+const list = ref(null)
+
+// consts
+const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
 
 const composableParams = {
   props,
@@ -196,10 +217,14 @@ const composableParams = {
   onToggleNotifications: () => emit('toggle-notifications')
 }
 
+// composables
 const { defaultAppUserProps, showAppUser } = useAppUser(composableParams)
 const { appMenuDropdownProps, showAppMenuDropdown } = useAppMenuDropdown(composableParams)
 const { developmentBadgeLabel, hasDevelopmentBadge } = useDevelopmentBadge()
 
+const { initializeScrollGradient } = setScrollGradient()
+
+// computeds
 const model = computed({
   get () {
     return props.modelValue
@@ -210,6 +235,21 @@ const model = computed({
   }
 })
 
+const normalizedItems = computed(() => {
+  if (props.useHomeItem) {
+    return [
+      {
+        label: 'Início',
+        icon: 'sym_r_home',
+        to: props.homeRoute || rootRoute
+      },
+      ...props.items
+    ]
+  }
+
+  return props.items
+})
+
 const behavior = computed(() => screen.untilLarge ? 'mobile' : 'desktop')
 const drawerWidth = computed(() => screen.untilLarge ? 320 : 280)
 const normalizedBrand = computed(() => isMini.value ? props.miniBrand : props.brand)
@@ -218,8 +258,6 @@ const isMiniMode = computed(() => {
   return screen.isLarge && isMini.value && !hasOpenedMenu.value && !hasOpenedHelpChat.value
 })
 
-const menuClasses = computed(() => ({ 'qas-app-menu__menu--spaced': !props.useChat }))
-
 const classes = computed(() => {
   return {
     content: {
@@ -250,7 +288,11 @@ watch(() => behavior.value, value => {
   }
 })
 
-// métodos
+// hooks
+onMounted(() => initializeScrollGradient(list.value.$el))
+onBeforeUnmount(() => initializeScrollGradient(list.value.$el))
+
+// functions
 function closeDrawer () {
   emit('update:modelValue', false)
 }
@@ -276,7 +318,7 @@ function hasChildren ({ children }) {
 }
 
 function hasSeparator (index) {
-  return !!props.items[index + 1]
+  return !!normalizedItems.value[index + 1]
 }
 
 function isActive ({ to }) {
@@ -289,16 +331,41 @@ function isActive ({ to }) {
   return currentPath === itemPath
 }
 
-function onMouseEvent ({ type }) {
+function onMouseEvent (event) {
   if (!screen.isLarge) return
 
-  const isMouseLeave = type === 'mouseleave'
+  // Se o mouse estiver fora do QList
+  const isMouseLeave = event.type === 'mouseleave'
 
   isMini.value = isMouseLeave
 
   model.value = false
 }
 
+function onMouseMoveList (event) {
+  // Se o menu já estiver aberto ou não for tela grande, não deve alterar o estado do menu.
+  if (!screen.isLarge || !isMini.value) return
+
+  const listElement = list.value.$el
+
+  // Obter a posição do QList na viewport
+  const { left, width } = listElement.getBoundingClientRect()
+
+  // Obter a posição do mouse relativa ao QList
+  const mouseRelativeX = event.clientX - left
+
+  // Calcular a largura do scrollbar do QList
+  const scrollbarWidth = listElement.offsetWidth - listElement.clientWidth
+
+  // Se o mouse estiver na faixa do scrollbar (última parte do QList)
+  const isOverScrollbar = mouseRelativeX > width - scrollbarWidth
+
+  // Se o mouse estiver sobre o scrollbar, não deve alterar o estado do menu
+  if (isOverScrollbar) return
+
+  onMouseEvent(event)
+}
+
 function setHasOpenedMenu (value) {
   hasOpenedMenu.value = value
 }
@@ -378,12 +445,12 @@ function useChatMenu () {
 
   &__item {
     &:not(&--label) + &:not(&--label) {
-      margin-top: var(--qas-spacing-sm);
+      margin-top: var(--qas-spacing-xs);
     }
 
     &--children.q-item {
       & + & {
-        margin-top: var(--qas-spacing-sm);
+        margin-top: var(--qas-spacing-xs);
       }
     }
   }
@@ -419,7 +486,7 @@ function useChatMenu () {
   &__content + &__content,
   &__content + &__item,
   &__item + &__content {
-    margin-top: var(--qas-spacing-sm);
+    margin-top: var(--qas-spacing-xs);
   }
 
   // User
@@ -431,14 +498,6 @@ function useChatMenu () {
   @media (min-width: $breakpoint-sm-max) {
     &__menu {
       overflow-x: hidden;
-
-      &:not(&--spaced) {
-        max-height: calc(100vh - 365px);
-      }
-    }
-
-    &__menu--spaced {
-      max-height: calc(100vh - 310px);
     }
   }
 }

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

@@ -15,6 +15,11 @@ props:
     type: String
     required: true
 
+  home-route:
+    desc: Rota do item de "home/inicio".
+    type: [String, Object]
+    default: undefined
+
   items:
     desc: Itens do menu.
     type: Array
@@ -49,6 +54,11 @@ props:
     type: Boolean
     default: true
 
+  use-home-item:
+    desc: Propriedade que adiciona item no menu de "inicio", forçando padronização.
+    type: Boolean
+    default: true
+
 slots:
   user:
     desc: Slot para acessar o menu de usuário.

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

@@ -1,12 +1,12 @@
 <template>
-  <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row" data-cy="app-user">
+  <div class="cursor-pointer items-center no-wrap q-gutter-x-sm qas-app-user row" data-cy="app-user">
     <div class="relative-position">
       <qas-avatar :image="props.user.photo" :size="props.avatarSize" :title="userName" />
 
       <qas-avatar v-if="hasNotificationInUserAvatar" v-bind="avatarNotificationCountProps" />
     </div>
 
-    <div class="ellipsis qas-app-user__data">
+    <div v-if="displayData" class="ellipsis qas-app-user__data">
       <div class="ellipsis qas-app-user__name text-grey-10">
         {{ userName }}
       </div>
@@ -73,6 +73,8 @@ import QasAvatar from '../avatar/QasAvatar.vue'
 
 import useNotifications from '../../composables/use-notifications'
 import useQueryCache from '../../composables/use-query-cache'
+import useScreen from '../../composables/use-screen'
+
 import { NotifySuccess, NotifyError } from '../../plugins'
 
 import { ref, computed, watch, inject } from 'vue'
@@ -105,6 +107,11 @@ const props = defineProps({
     default: () => ({}),
     required: true,
     type: Object
+  },
+
+  useDataOnSmallScreen: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -115,6 +122,7 @@ const emit = defineEmits(['sign-out', 'toggle-notifications'])
 const axios = inject('axios')
 
 // composables
+const screen = useScreen()
 const router = useRouter()
 
 const { isNotificationsEnabled, unreadNotificationsCount } = useNotifications()
@@ -149,6 +157,8 @@ const hasNotificationInUserAvatar = computed(() => isNotificationsEnabled && has
 const unreadNotificationsToString = computed(() => String(unreadNotificationsCount.value))
 const userName = computed(() => props.user.name || props.user.givenName)
 
+const displayData = computed(() => props.useDataOnSmallScreen || screen.isMedium)
+
 // watch
 watch(() => props.companyProps.modelValue, value => {
   companiesModel.value = value
@@ -280,11 +290,5 @@ function useAvatarNotifications () {
       margin-top: var(--qas-spacing-sm);
     }
   }
-
-  @media (max-width: $breakpoint-xs) {
-    &__data {
-      display: none;
-    }
-  }
 }
 </style>

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

@@ -39,6 +39,11 @@ props:
       "
     ]
 
+  use-data-on-small-screen:
+    desc: Habilita os dados do usuário como nome/email em telas pequenas/ (mobile).
+    type: Boolean
+    default: true
+
 events:
   '@sign-out -> function()':
     desc: Dispara quando o botão de "sair" é clicado.

package/src/components/badge/QasBadge.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-caption">
+  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-body2">
     <slot />
   </component>
 </template>

package/src/components/checkbox/QasCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="qas-checkbox">
+  <div class="qas-checkbox" :class="classes">
     <!-- Single -->
     <q-checkbox v-if="isSingle" v-model="model" v-bind="singleAttributes" dense>
       <slot />
@@ -7,32 +7,32 @@
 
     <!-- Group -->
     <div v-else>
-      <div v-if="hasCheckboxLabel" class="q-mb-sm text-body1" :class="checkboxLabelClasses">
-        {{ formattedLabel }}
-      </div>
+      <qas-label v-if="props.label" :color="labelColor" :label="formattedLabel" margin="sm" typography="h5" />
 
-      <div :class="classes">
+      <div class="flex q-col-gutter-md" :class="contentClasses">
         <div v-for="(option, index) in props.options" :key="index">
           <!-- Com children -->
-          <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :indeterminate-value="false" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
+          <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :disable="props.disable" :indeterminate-value="false" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
 
           <!-- Com children -->
-          <q-option-group v-if="hasChildren(option)" class="q-ml-xs q-mt-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+          <q-option-group v-if="hasChildren(option)" class="q-ml-sm q-mt-sm" :class="gutterClasses" dense :disable="props.disable" :inline="isInline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
 
           <!-- Sem children -->
-          <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+          <q-option-group v-else v-model="model" v-bind="attrs" dense :disable="props.disable" inline :options="[option]" type="checkbox" />
         </div>
       </div>
     </div>
 
-    <div v-if="props.errorMessage" class="q-pt-sm qas-checkbox__error-message text-negative">
-      {{ props.errorMessage }}
-    </div>
+    <qas-error-message v-if="hasErrorMessage" :message="props.errorMessage" />
   </div>
 </template>
 
 <script setup>
+import useErrorMessage, { baseErrorProps } from '../../composables/private/use-error-message'
+import useScreen from '../../composables/use-screen'
+
 import { getRequiredLabel } from '../../helpers'
+
 import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
 defineOptions({
@@ -41,6 +41,12 @@ defineOptions({
 })
 
 const props = defineProps({
+  ...baseErrorProps,
+
+  disable: {
+    type: Boolean
+  },
+
   label: {
     default: '',
     type: String
@@ -61,34 +67,49 @@ const props = defineProps({
     type: Boolean
   },
 
-  errorMessage: {
-    type: String,
-    default: ''
-  },
-
-  error: {
+  required: {
     type: Boolean
   },
 
-  required: {
-    type: Boolean
+  useAsTitle: {
+    type: Boolean,
+    default: false
   }
 })
 
+// emits
 const emit = defineEmits(['update:modelValue'])
 
+// globals
 const attrs = useAttrs()
 
+// composables
+const { color } = useErrorMessage(props)
+const screen = useScreen()
+
 // refs
 const group = ref({})
 
-// lifecycle
+// hooks
 onMounted(handleParent)
 
 // computed
-const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
+const isInline = computed(() => !screen.isSmall)
+const isSingle = computed(() => !props.options.length)
+const isTitleMode = computed(() => props.useAsTitle && isSingle.value)
 
-const hasCheckboxLabel = computed(() => !!props.label)
+const classes = computed(() => {
+  return {
+    'qas-checkbox--title': isTitleMode.value,
+    'qas-checkbox--error': props.error && isSingle.value
+  }
+})
+
+const labelColor = computed(() => props.disable ? 'grey-6' : color.value)
+const contentClasses = computed(() => !isInline.value && 'column')
+const gutterClasses = computed(() => isInline.value ? 'q-gutter-x-md' : 'q-gutter-y-md')
+
+const hasErrorMessage = computed(() => props.errorMessage && !isSingle.value)
 
 const model = computed({
   get () {
@@ -100,20 +121,14 @@ const model = computed({
   }
 })
 
-const isSingle = computed(() => !props.options.length)
-
 const singleAttributes = computed(() => {
   return {
     ...attrs,
-
+    disable: props.disable,
     label: props.label
   }
 })
 
-const checkboxLabelClasses = computed(() => {
-  return { 'text-negative': props.error }
-})
-
 const formattedLabel = computed(() => {
   return getRequiredLabel({ label: props.label, required: props.required })
 })
@@ -177,9 +192,59 @@ function getModelValue (index) {
 
 <style lang="scss">
 .qas-checkbox {
-  &__error-message {
-    // Tamanho da fonte utilizada nos errors no q-field.
-    font-size: 11px;
+  $root: &;
+
+  // aplica pra todos que não for title, uma vez que title tem tipografia própria
+  &:not(&--title) {
+    color: $grey-8;
+
+    .q-checkbox__label {
+      @include set-typography($body1);
+    }
+  }
+
+  .q-checkbox {
+    &__label {
+      padding-left: var(--qas-spacing-sm) !important;
+    }
+
+    &__inner {
+      width: 18px;
+      height: 18px;
+      min-width: 18px;
+    }
+
+    &.disabled {
+      opacity: 1 !important;
+
+      .q-checkbox__label,
+      .q-checkbox__bg,
+      .q-checkbox__inner {
+        color: $grey-6;
+      }
+    }
+  }
+
+  &--title {
+    color: $grey-10;
+
+    &:not(#{$root}--error) {
+      .q-checkbox__inner--falsy .q-checkbox__bg {
+        border-color: $grey-10;
+      }
+    }
+
+    .q-checkbox__label {
+      @include set-typography($h5);
+    }
+  }
+
+  &--error {
+    color: $negative;
+
+    .q-checkbox__bg {
+      color: $negative;
+    }
   }
 }
 </style>