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

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.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

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/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/grid-generator/QasGridGenerator.yml

@@ -10,6 +10,10 @@ props:
     type: [Array, String, Object]
     examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 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"]
+
   content-class:
     desc: Classe de cada "div" pai referente ao resultado.
     default: ''
@@ -57,9 +61,6 @@ props:
     desc: Adiciona a disposição dos campos por linha, ou seja, header e content ocupando a linha toda.
     type: Boolean
 
-  use-common-columns:
-    desc: Usado quando precisa passar a prop "columns" como objeto sendo que será o valor comum para todos fields
-
 slots:
   content:
     desc: Slot para o conteúdo (content).

package/src/composables/private/use-generator.js

@@ -10,6 +10,11 @@ export const baseProps = {
     type: [Array, String, Object]
   },
 
+  commonColumns: {
+    default: () => ({}),
+    type: [Object, String]
+  },
+
   fields: {
     default: () => ({}),
     type: Object
@@ -19,10 +24,6 @@ export const baseProps = {
     default: Spacing.Lg,
     type: [String, Boolean],
     validator: gutterValidator
-  },
-
-  useCommonColumns: {
-    type: Boolean
   }
 }
 
@@ -61,9 +62,7 @@ export default function ({ props = {} }) {
    * @returns {(string|string[])}
    */
   function getFieldClass ({ index, isGridGenerator, fields }) {
-    if (typeof props.columns === 'string') {
-      return IRREGULAR_CLASSES.includes(props.columns) ? props.columns : `col-${props.columns}`
-    }
+    if (typeof props.columns === 'string') return _getStringColumns(props.columns)
 
     return Array.isArray(props.columns)
       ? _handleColumnsByIndex({ index, isGridGenerator, fields })
@@ -72,7 +71,13 @@ export default function ({ props = {} }) {
 
   /**
    * @private
-  */
+   */
+  function _getStringColumns (columns) {
+    return IRREGULAR_CLASSES.includes(columns) ? columns : `col-${columns}`
+  }
+  /**
+   * @private
+   */
   function _getBreakpoint (columns) {
     const classes = []
 
@@ -104,6 +109,10 @@ export default function ({ props = {} }) {
    * @private
   */
   function _getDefaultColumnClass (isGridGenerator) {
+    if (typeof props.commonColumns === 'string') return _getStringColumns(props.commonColumns)
+
+    if (Object.keys(props.commonColumns).length) return _getBreakpoint(props.commonColumns)
+
     return isGridGenerator ? 'col-6 col-xs-12 col-sm-4' : 'col-6'
   }
 
@@ -111,13 +120,6 @@ export default function ({ props = {} }) {
    * @private
   */
   function _handleColumnsByField ({ index, isGridGenerator }) {
-    /*
-     * Quando é passado o columns como um único objeto que será replicado para todos fields.
-     */
-    if (props.useCommonColumns && Object.keys(props.columns).length) {
-      return _getBreakpoint(props.columns)
-    }
-
     /*
      * Quando não é passado columns, retornará o default.
      */