@bildvitta/quasar-ui-asteroid 3.17.0-beta.8 → 3.17.0

package/src/css/components/field.scss

@@ -44,15 +44,15 @@
   &--focused.q-field--labeled {
     transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
 
-    .q-field__label {
+    &:not(&.qas-select--filter):not(&.qas-select--has-icon) .q-field__label {
       transform: translateY(-10px) scale(0.85) !important;
     }
 
-    .q-field__prepend {
-      transition: transform var(--qas-generic-transition);
-      transform: translateY(6px) !important;
+    &.qas-select--filter:not(&.qas-select--has-icon) .q-field__label {
+      transform: translateY(-8px) scale(0.85) !important;
     }
 
+    .q-field__prepend,
     .q-field__append {
       transition: transform var(--qas-generic-transition);
       transform: translateY(6px) !important;
@@ -65,8 +65,8 @@
 
   &--float.qas-numeric-input--has-icon,
   &--focused.qas-numeric-input--has-icon,
-  &--float.qas-select--has-icon,
-  &--focused.qas-select--has-icon,
+  &--float.qas-select--has-icon:not(.qas-select--filter),
+  &--focused.qas-select--has-icon:not(.qas-select--filter),
   &--float.qas-input--has-icon,
   &--focused.qas-input--has-icon {
     .q-field__label {
@@ -74,6 +74,13 @@
     }
   }
 
+  &--float.qas-select--has-icon.qas-select--filter,
+  &--focused.qas-select--has-icon.qas-select--filter {
+    .q-field__label {
+      transform: translate(-24px, -8px) scale(0.85) !important;
+    }
+  }
+
   &--outlined .q-field__control {
     background-color: white;
     border-radius: $generic-border-radius;

package/src/helpers/set-scroll-on-grab.js

@@ -7,10 +7,11 @@
 *  onMoveFn: function({ element: HTMLElement, event: MouseEvent | TouchEvent }),
 *  onScrollFn: function({ element: HTMLElement, event: Event })
 * }} options
+* @param {String} cancelMouseDownTarget
 *
 * @returns {{ element: HTMLElement, destroyEvents: function }}
 */
-export default function (element, options = {}) {
+export default function (element, options = {}, cancelMouseDownTarget) {
   let isDown = false
   let startX
   let scrollLeft
@@ -46,6 +47,13 @@ export default function (element, options = {}) {
   }
 
   function onMouseEnter (event) {
+    /**
+     * closest busca ancestral mais próximo de um elemento, ou seja, verifica se no event que recebo, tenho a classe no qual nao se deve aplicar o grab.
+     */
+    const targetElement = cancelMouseDownTarget ? event.target.closest(`.${cancelMouseDownTarget}`) : null
+
+    if (!!cancelMouseDownTarget && !!targetElement) return null
+
     onEnter()
 
     startX = event.pageX - element.offsetLeft

package/src/shared/badge-config.js

@@ -0,0 +1,29 @@
+export const baseProps = {
+  color: {
+    type: String,
+    default: 'light-blue-2'
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  multiLine: {
+    type: Boolean
+  },
+
+  textColor: {
+    type: String,
+    default: 'black'
+  },
+
+  removable: {
+    type: Boolean
+  },
+
+  tabindex: {
+    type: [String, Number],
+    default: undefined
+  }
+}

package/src/vue-plugin.js

@@ -14,6 +14,7 @@ import QasBtnDropdown from './components/btn-dropdown/QasBtnDropdown.vue'
 import QasCard from './components/card/QasCard.vue'
 import QasCardImage from './components/card-image/QasCardImage.vue'
 import QasCheckbox from './components/checkbox/QasCheckbox.vue'
+import QasSelectFilter from './components/select-filter/QasSelectFilter.vue'
 import QasCopy from './components/copy/QasCopy.vue'
 import QasDate from './components/date/QasDate.vue'
 import QasDateTimeInput from './components/date-time-input/QasDateTimeInput.vue'
@@ -112,6 +113,7 @@ async function install (app) {
   app.component('QasCard', QasCard)
   app.component('QasCardImage', QasCardImage)
   app.component('QasCheckbox', QasCheckbox)
+  app.component('QasSelectFilter', QasSelectFilter)
   app.component('QasCopy', QasCopy)
   app.component('QasDate', QasDate)
   app.component('QasDateTimeInput', QasDateTimeInput)
@@ -213,6 +215,7 @@ export {
   QasCard,
   QasCheckbox,
   QasCopy,
+  QasSelectFilter,
   QasDate,
   QasDateTimeInput,
   QasDebugger,

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

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