@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

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

@@ -1,222 +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>
+<!-- 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>