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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.16.0-beta.0",
+  "version": "3.16.0-beta.10",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -43,6 +43,7 @@
     "sass": "^1.62.1"
   },
   "dependencies": {
+    "@bildvitta/composables": "^1.0.0-beta.7",
     "@bildvitta/store-adapter": "^1.0.0",
     "autonumeric": "^4.9.0",
     "axios": "^1.4.0",

package/src/components/actions/QasActions.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="q-mt-sm" :class="classes">
+    <div v-if="hasTertiarySlot" :class="columnClasses">
+      <slot name="tertiary" />
+    </div>
+
     <div v-if="hasSecondarySlot" :class="columnClasses">
       <slot name="secondary" />
     </div>
@@ -52,6 +56,8 @@ const classes = computed(() => {
   const isSmallOrFullWidth = screen.isSmall || props.useFullWidth
 
   return [
+    'items-center',
+
     // alinhamento
     `justify-${props.align}`,
 
@@ -71,4 +77,5 @@ const columnClasses = computed(() => {
 
 const hasPrimarySlot = computed(() => !!slots.primary)
 const hasSecondarySlot = computed(() => !!slots.secondary)
+const hasTertiarySlot = computed(() => !!slots.tertiary)
 </script>

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

@@ -3,7 +3,7 @@
     <qas-btn-dropdown v-bind="btnDropdownProps">
       <q-list data-cy="actions-menu-list">
         <slot v-for="(item, key) in formattedList.dropdownList" :item="item" :name="key">
-          <q-item v-bind="getItemProps(item)" :key="key" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
+          <q-item v-bind="getItemProps(item)" :key="key" active-class="primary" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
             <q-item-section avatar>
               <q-icon :name="item.icon" />
             </q-item-section>
@@ -240,10 +240,11 @@ const { showTooltip, tooltipLabels } = useTooltips({ formattedList, fullList, pr
 
 // functions
 function getItemProps (item) {
-  const { disable, props: itemProps } = item
+  const { disable, props: itemProps, to } = item
 
   return {
     disable,
+    to,
     ...itemProps
   }
 }

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

@@ -30,7 +30,7 @@
           </div>
 
           <!-- List -->
-          <q-list v-if="props.items.length" class="q-mt-xl qas-app-menu__menu text-grey-10">
+          <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">
@@ -75,9 +75,30 @@
           </q-list>
         </div>
 
-        <!-- User -->
-        <div v-if="showAppUser" class="full-width q-pb-lg q-px-lg">
-          <qas-app-user v-bind="defaultAppUserProps" />
+        <div v-if="showAppUser">
+          <!-- Chat Ajuda -->
+          <q-list v-if="helpChatLink" class="q-mt-xl">
+            <q-item class="q-mb-md text-primary" clickable>
+              <q-item-section avatar>
+                <q-icon name="sym_r_chat" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>
+                  <div class="ellipsis text-subtitle2">
+                    Solicitar ajuda
+                  </div>
+                </q-item-label>
+              </q-item-section>
+
+              <pv-app-menu-help-chat :link="props.helpChatLink" :mini-brand="props.miniBrand" @update:model-value="setHasOpenedHelpChat" />
+            </q-item>
+          </q-list>
+
+          <!-- User -->
+          <div class="full-width q-pb-lg q-px-lg">
+            <qas-app-user v-bind="defaultAppUserProps" />
+          </div>
         </div>
       </div>
     </q-drawer>
@@ -85,6 +106,7 @@
 </template>
 
 <script setup>
+import PvAppMenuHelpChat from './private/PvAppMenuHelpChat.vue'
 import PvAppMenuDropdown from './private/PvAppMenuDropdown.vue'
 import QasAppUser from '../app-user/QasAppUser.vue'
 
@@ -114,6 +136,11 @@ const props = defineProps({
     type: String
   },
 
+  helpChatLink: {
+    type: String,
+    default: ''
+  },
+
   items: {
     default: () => [],
     type: Array
@@ -154,6 +181,7 @@ const router = useRouter()
 const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
 
 const hasOpenedMenu = ref(false)
+const hasOpenedHelpChat = ref(false)
 const isMini = ref(screen.isLarge)
 const reRenderCount = ref(0)
 
@@ -180,9 +208,14 @@ const model = computed({
 
 const behavior = computed(() => screen.untilLarge ? 'mobile' : 'desktop')
 const drawerWidth = computed(() => screen.untilLarge ? 320 : 280)
-const isMiniMode = computed(() => screen.isLarge && isMini.value && !hasOpenedMenu.value)
 const normalizedBrand = computed(() => isMini.value ? props.miniBrand : props.brand)
 
+const isMiniMode = computed(() => {
+  return screen.isLarge && isMini.value && !hasOpenedMenu.value && !hasOpenedHelpChat.value
+})
+
+const menuClasses = computed(() => ({ 'qas-app-menu__menu--spaced': !props.helpChatLink }))
+
 const classes = computed(() => {
   return {
     content: {
@@ -262,6 +295,10 @@ function onMouseEvent ({ type }) {
 function setHasOpenedMenu (value) {
   hasOpenedMenu.value = value
 }
+
+function setHasOpenedHelpChat (value) {
+  hasOpenedHelpChat.value = value
+}
 </script>
 
 <style lang="scss" scoped>
@@ -335,8 +372,15 @@ function setHasOpenedMenu (value) {
   // Media: untilLarge
   @media (min-width: $breakpoint-sm-max) {
     &__menu {
+      overflow-x: hidden;
+
+      &:not(&--spaced) {
+        max-height: calc(100vh - 365px);
+      }
+    }
+
+    &__menu--spaced {
       max-height: calc(100vh - 310px);
-      overflow-x: auto;
     }
   }
 }

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

@@ -15,6 +15,11 @@ props:
     type: String
     required: true
 
+  help-chat-link:
+    desc: Link para ser usado no iframe do chat, caso não passe nada, o chat não será exibido.
+    type: String
+    default: ''
+
   items:
     desc: Itens do menu.
     type: Array

package/src/components/app-menu/private/PvAppMenuHelpChat.vue

@@ -0,0 +1,222 @@
+<!-- O chat em si é renderizado em um iframe, o que QMenu, toda vez que fecha se auto destroy, então não podemos usar o
+iframe dentro do QMenu, pois toda vez que um iframe é destruído ele perde o seu estado, e teria que iniciar um novo chat,
+pra isto é criado um iframe no body, e posicionado com JS + CSS para ficar sobre o QMenu. -->
+
+<template>
+  <q-menu class="pv-app-menu-help-chat shadow-2" v-bind="menuProps">
+    <header class="q-pa-md">
+      <q-img class="q-mb-md" :src="props.miniBrand" width="36px" />
+
+      <h3 class="text-h3">
+        Bem-vindo!
+      </h3>
+
+      <div class="text-body1">
+        Deixe a sua mensagem para o suporte técnico da Nave.
+      </div>
+    </header>
+
+    <qas-box class="full-width pv-app-menu-help-chat__content relative-position" :class="boxClasses">
+      <div v-if="showIframe" ref="chatContent" class="full-width" />
+
+      <div v-else class="full-width self-end">
+        <div class="q-mb-sm text-subtitle2">
+          Estamos conectados
+        </div>
+
+        <div class="text-body2">
+          Normalmente responde em alguns minutos
+        </div>
+
+        <qas-btn class="full-width q-mt-lg" label="Iniciar conversa" variant="primary" @click="initializeChat" />
+      </div>
+
+      <q-inner-loading :showing="showInnerLoading">
+        <q-spinner color="grey" size="2rem" />
+      </q-inner-loading>
+    </qas-box>
+  </q-menu>
+</template>
+
+<script setup>
+import { useScreen } from '../../../composables'
+
+import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue'
+
+defineOptions({ name: 'PvAppMenuHelpChat' })
+
+const props = defineProps({
+  link: {
+    type: String,
+    default: ''
+  },
+
+  miniBrand: {
+    type: String,
+    default: ''
+  }
+})
+
+const screen = useScreen()
+
+// refs
+const chatContent = ref(null)
+const isOpened = ref(false)
+const showIframe = ref(false)
+const showInnerLoading = ref(false)
+
+// computed
+const boxClasses = computed(() => {
+  return {
+    flex: !showIframe.value,
+    'pv-app-menu-help-chat__content--is-opened': showIframe.value
+  }
+})
+
+const menuProps = computed(() => {
+  return {
+    anchor: screen.isSmall ? 'top middle' : 'top right',
+    maxWidth: screen.isSmall ? '300px' : '400px',
+    self: screen.isSmall ? 'bottom middle' : 'top left',
+    touchPosition: !screen.isSmall,
+
+    onBeforeHide: hideIframe,
+    onShow
+  }
+})
+
+// hooks
+
+/**
+ * Toda vez que a prop "behavior" do componente "QasAppMenu" é alterada, este componente
+ * é renderizado novamente, então é necessário esconder o iframe caso ele ja esteja aberto.
+ */
+onMounted(hideIframe)
+
+onUnmounted(() => {
+  if (showIframe.value) {
+    window.removeEventListener('scroll', onScroll)
+    window.removeEventListener('resize', onScroll)
+  }
+})
+
+// functions
+
+/**
+ * Define o estilo do iframe de acordo com a posição do "chatContent" dentro
+ * do QMenu.
+ */
+async function setIframeStyle () {
+  await nextTick()
+
+  const iframe = getIframe()
+
+  if (!iframe || !chatContent.value) return
+
+  const { bottom, left, top } = chatContent.value.getBoundingClientRect()
+
+  const width = chatContent.value.offsetWidth
+
+  const styles = {
+    display: 'block',
+    top: `${bottom + window.scrollY}px`,
+    left: `${left + window.scrollX}px`,
+    bottom: `${top}px`,
+    width: `${width}px`
+  }
+
+  Object.assign(iframe.style, styles)
+}
+
+function onShow () {
+  isOpened.value = true
+
+  if (showIframe.value) setIframeStyle()
+}
+
+function hideIframe () {
+  isOpened.value = false
+
+  const iframe = getIframe()
+
+  if (!iframe) return
+
+  iframe.style.display = 'none'
+}
+
+function onScroll () {
+  if (isOpened.value) setIframeStyle()
+}
+
+function createIframe () {
+  const iframe = document.createElement('iframe')
+
+  iframe.id = 'chat-iframe'
+  iframe.className = 'pv-app-menu-help-chat__iframe'
+  iframe.style.display = 'none'
+  iframe.src = props.link
+
+  document.body.appendChild(iframe)
+}
+
+function getIframe () {
+  return document.getElementById('chat-iframe')
+}
+
+function initializeChat () {
+  createIframe()
+
+  window.addEventListener('scroll', onScroll)
+  window.addEventListener('resize', onScroll)
+
+  toggleIframe()
+}
+
+function toggleIframe () {
+  showIframe.value = !showIframe.value
+
+  showInnerLoading.value = true
+
+  /**
+   * É adicionado um loading por 3 motivos:
+   * - o iframe demora um pouco para ser carregado
+   * - o loading é um feedback visual para o usuário enquanto o iframe é carregado
+   * - não é possível adicionar uma animação aparecendo o iframe, então desta
+   * forma fica suavizado
+   */
+  setTimeout(async () => {
+    showInnerLoading.value = false
+
+    await nextTick()
+
+    onShow()
+  }, 2000)
+}
+</script>
+
+<style lang="scss">
+.pv-app-menu-help-chat {
+  overflow-y: hidden;
+
+  &__content {
+    height: 260px;
+    background-color: var(--qas-background-color) !important;
+  }
+
+  &__iframe {
+    border: 0;
+    border-radius: var(--qas-generic-border-radius);
+    outline: none;
+    position: absolute;
+    height: calc(260px - calc(var(--qas-spacing-md) * 2));
+    z-index: 9999;
+  }
+
+  // Media: isSmall
+  @media (max-width: $breakpoint-sm-min) {
+    &__content--is-opened {
+      padding: var(--qas-spacing-sm) !important;
+    }
+  }
+}
+</style>

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -2,8 +2,8 @@
   <div class="qas-btn-dropdown" :class="classes.parent">
     <div v-if="hasButtons" :class="classes.list">
       <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
-        <div class="flex">
-          <qas-btn :disable="props.disable" v-bind="buttonProps" variant="tertiary" @click="onClick">
+        <div class="flex no-wrap">
+          <qas-btn :disable="props.disable" v-bind="buttonProps" no-wrap variant="tertiary" @click="onClick">
             <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
               <div :class="classes.menuContent">
                 <slot />
@@ -91,7 +91,7 @@ const classes = computed(() => {
     },
 
     list: {
-      flex: !isSingleButton.value
+      'flex no-wrap': !isSingleButton.value
     }
   }
 })

package/src/components/expansion-item/QasExpansionItem.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="qas-expansion-item" :class="errorClasses">
-    <qas-box class="qas-expansion-item__box">
-      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none" :label="props.label">
+  <div ref="expansionItem" class="full-width qas-expansion-item" :class="errorClasses" v-bind="expansionProps.parent">
+    <component :is="component.is" class="qas-expansion-item__box">
+      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" :label="props.label" v-bind="expansionProps.item">
         <template #header>
           <slot name="header">
             <div class="full-width">
               <div class="items-center q-col-gutter-sm row">
                 <slot name="label">
-                  <h5 class="col-auto text-h5 text-weight-medium">
+                  <h5 class="col-auto text-h5">
                     {{ props.label }}
                   </h5>
                 </slot>
@@ -18,17 +18,25 @@
                   </div>
                 </div>
               </div>
+
+              <div v-if="hasHeaderBottom" class="q-mt-sm">
+                <slot name="header-bottom" />
+              </div>
             </div>
           </slot>
         </template>
 
-        <q-separator class="q-my-md" />
+        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
+
+        <div :class="contentClasses">
+          <slot name="content">
+            <qas-grid-generator v-if="hasGridGenerator" use-inline v-bind="gridGeneratorProps" />
+          </slot>
+        </div>
 
-        <slot name="content">
-          <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" use-inline />
-        </slot>
+        <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
       </q-expansion-item>
-    </qas-box>
+    </component>
 
     <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
       {{ props.errorMessage }}
@@ -37,9 +45,14 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import QasBox from '../box/QasBox.vue'
 
-defineOptions({ name: 'QasExpansionItem' })
+import { computed, provide, inject, onMounted, ref, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasExpansionItem',
+  inheritAttrs: false
+})
 
 const props = defineProps({
   badges: {
@@ -64,20 +77,112 @@ const props = defineProps({
   gridGeneratorProps: {
     type: Object,
     default: () => ({})
+  },
+
+  useHeaderSeparator: {
+    type: Boolean,
+    default: undefined
   }
 })
 
+const attrs = useAttrs()
+
+provide('isExpansionItem', true)
+
+// slots
+const slots = defineSlots()
+
+// refs
+const expansionItem = ref(null)
+const hasNextSibling = ref(false)
+
+onMounted(setHasNextSibling)
+
+// constants
+const isNestedExpansionItem = inject('isExpansionItem', false)
+const component = {
+  is: isNestedExpansionItem ? 'div' : QasBox
+}
+
+// computed
 const hasError = computed(() => props.error || !!props.errorMessage)
+const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
+const hasHeaderBottom = computed(() => !!slots['header-bottom'])
+
+/**
+ * Verifica se o componente deve adicionar um separador no header.
+ *
+ * - Se a propriedade useHeaderSeparator for true, retorna separador.
+ * - Se a propriedade useHeaderSeparator for undefined, retorna separador apenas se não for um componente aninhado.
+ * - Se a propriedade useHeaderSeparator for false, não retorna separador.
+ */
+const hasHeaderSeparator = computed(() => {
+  return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
+})
 
 const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
 
-const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const contentClasses = computed(() => {
+  return {
+    'q-mt-sm': isNestedExpansionItem,
+    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator
+  }
+})
+
+const expansionProps = computed(() => {
+  const {
+    'onUpdate:modelValue': onUpdateModelValue,
+    onShow,
+    onBeforeShow,
+    onBeforeHide,
+    onAfterShow,
+    onAfterHide,
+    ...propsPayload
+  } = attrs
+
+  return {
+    parent: {
+      ...propsPayload
+    },
+
+    item: {
+      onUpdateModelValue,
+      onShow,
+      onBeforeShow,
+      onBeforeHide,
+      onAfterShow,
+      onAfterHide
+    }
+  }
+})
+
+// functions
+
+/**
+ * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
+ * para adicionar um separador.
+ */
+function setHasNextSibling (value) {
+  if (!isNestedExpansionItem) return
+
+  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
+  const hasElementSibling = !!expansionItem.value.nextElementSibling
+
+  hasNextSibling.value = hasElementSibling || hasTextContentSibling
+}
 </script>
 
 <style lang="scss">
 .qas-expansion-item {
   $root: &;
 
+  // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
+  &__header {
+    position: relative;
+    z-index: 1;
+  }
+
   &--error {
     #{$root}__box {
       border: 2px solid $negative;

package/src/components/expansion-item/QasExpansionItem.yml

@@ -24,10 +24,18 @@ props:
     desc: Propriedades que serão repassadas para o QasGridGenerator.
     type: Object
 
+  use-header-separator:
+    desc: Propriedade para forçar o QSeparator no header.
+    type: Boolean
+    default: undefined
+
 slots:
   header:
     desc: 'Slot para substituir o conteúdo do header'
 
+  header-bottom:
+    desc: 'Slot para acessar o conteúdo que fica abaixo do header.'
+
   label:
     desc: 'Slot para substituir o conteúdo da label do header.'
 

package/src/components/form-generator/QasFormGenerator.yml

@@ -10,6 +10,10 @@ props:
     type: [Array, String, Object]
     examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12", "{ sm: 6, md: 12 }"]
 
+  common-columns:
+    desc: Usado quando precisa passar o mesmo valor para todas as colunas, sem especificar cada uma, ela é feita como um merge com a prop "columns".
+    examples: ["{ name: { sm: 6, md: 12 } }", "12"]
+
   disable:
     desc: Deixa os campos desabilitados enviando a prop "disable" para cada campo.
     default: "false"
@@ -63,9 +67,6 @@ props:
     default: []
     type: Array
 
-  use-common-columns:
-    desc: Utilizado quando passar a estrutura da prop "columns" sendo um objeto onde seus breakpoints serão replicados para todos fields.
-
 slots:
   'field-[nome-da-chave]':
     desc: Acessa o slot de um campo especifico.

package/src/components/form-view/QasFormView.vue

@@ -5,7 +5,9 @@
     </header>
 
     <q-form ref="form" v-bind="defaultFormProps">
-      <slot />
+      <slot v-if="mx_canShowFetchErrorSlot" name="fetch-error" />
+
+      <slot v-else />
 
       <slot v-if="useActions" name="actions">
         <qas-actions>

package/src/components/form-view/QasFormView.yml

@@ -155,6 +155,9 @@ slots:
   default:
     desc: Slot para ter o conteúdo principal (dentro do main).
 
+  fetch-error:
+    desc: Slot disponibilizado em caso de fetchError.
+
   footer:
     desc: Slot para acessar o footer.