@bildvitta/quasar-ui-asteroid 3.17.0-beta.27-alpha.0 → 3.17.0-beta.28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.17.0-beta.27-alpha.0",
+  "version": "3.17.0-beta.28",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -50,7 +50,6 @@
     "date-fns": "^2.30.0",
     "debug": "^4.3.4",
     "fuse.js": "^6.6.2",
-    "gleap": "^14.2.5",
     "humps": "^2.0.1",
     "lodash-es": "^4.17.21",
     "pica": "^9.0.1",

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

@@ -79,8 +79,8 @@
 
         <div v-if="showAppUser">
           <!-- 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="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>
@@ -92,6 +92,8 @@
                   </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>
 
@@ -106,6 +108,7 @@
 </template>
 
 <script setup>
+import PvAppMenuHelpChat from './private/PvAppMenuHelpChat.vue'
 import PvAppMenuDropdown from './private/PvAppMenuDropdown.vue'
 import QasAppUser from '../app-user/QasAppUser.vue'
 
@@ -113,12 +116,8 @@ import useAppMenuDropdown from './composables/use-app-menu-dropdown'
 import useAppUser from './composables/use-app-user'
 import useDevelopmentBadge from './composables/use-development-badge'
 import { useScreen } from '../../composables'
-import useAuthUser from '../../composables/private/use-auth-user'
-
-import { handleProcess } from '../../helpers'
 
-import Gleap from 'gleap'
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 defineOptions({
@@ -139,6 +138,11 @@ const props = defineProps({
     type: String
   },
 
+  helpChatLink: {
+    type: String,
+    default: ''
+  },
+
   items: {
     default: () => [],
     type: Array
@@ -168,11 +172,6 @@ const props = defineProps({
   title: {
     default: '',
     type: String
-  },
-
-  useChat: {
-    default: true,
-    type: Boolean
   }
 })
 
@@ -180,9 +179,6 @@ const emit = defineEmits(['sign-out', 'update:modelValue', 'toggle-notifications
 
 const screen = useScreen()
 const router = useRouter()
-const { initializeChat, toggleChat } = useChatMenu()
-
-onMounted(initializeChat)
 
 const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
 
@@ -220,7 +216,7 @@ const isMiniMode = computed(() => {
   return screen.isLarge && isMini.value && !hasOpenedMenu.value && !hasOpenedHelpChat.value
 })
 
-const menuClasses = computed(() => ({ 'qas-app-menu__menu--spaced': !props.useChat }))
+const menuClasses = computed(() => ({ 'qas-app-menu__menu--spaced': !props.helpChatLink }))
 
 const classes = computed(() => {
   return {
@@ -305,53 +301,8 @@ function setHasOpenedMenu (value) {
   hasOpenedMenu.value = value
 }
 
-// composables definition
-function useChatMenu () {
-  const { user } = useAuthUser()
-
-  const isMeVersionTwo = process.env.ME_VERSION === 2
-
-  function initializeChat () {
-    Gleap.initialize(handleProcess(() => process.env.GLEAP))
-
-    Gleap.setLanguage('pt-BR')
-
-    const {
-      uuid,
-      name,
-      email,
-      callingCode,
-      phone,
-      companyLink,
-      companyLinksOptions,
-      mainCompanyOptions, // somente na v2
-      currentMainCompany // somente na v2
-    } = user.value
-
-    const companyId = isMeVersionTwo ? currentMainCompany : companyLink
-    const companyNameList = isMeVersionTwo ? mainCompanyOptions : companyLinksOptions
-
-    const companyName = companyNameList?.find(({ value }) => value === companyId)?.label
-
-    Gleap.identify(uuid, {
-      name,
-      email,
-      phone: `+${callingCode || '55'}${phone}`,
-      companyId,
-      companyName
-    })
-  }
-
-  function toggleChat () {
-    if (Gleap.isOpened()) return Gleap.close()
-
-    Gleap.open()
-  }
-
-  return {
-    initializeChat,
-    toggleChat
-  }
+function setHasOpenedHelpChat (value) {
+  hasOpenedHelpChat.value = value
 }
 </script>
 

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
@@ -44,11 +49,6 @@ props:
     desc: Título que vai ficar no label do select de módulos.
     type: String
 
-  use-chat:
-    desc: Componente para controlar se vai ter ou não o chat.
-    type: Boolean
-    default: true
-
 slots:
   user:
     desc: Slot para acessar o menu de usuário.

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/badge/QasBadge.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script setup>
+import { baseProps } from '../../shared/badge-config'
+
 import { computed } from 'vue'
 
 defineOptions({
@@ -12,35 +14,7 @@ defineOptions({
   inheritAttrs: false
 })
 
-const props = defineProps({
-  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
-  }
-})
+const props = defineProps(baseProps)
 
 const emit = defineEmits(['remove'])
 const model = defineModel({ type: Boolean, default: true })

package/src/components/checkbox/QasCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="qas-checkbox">
     <!-- Single -->
     <q-checkbox v-if="isSingle" v-model="model" v-bind="singleAttributes" dense>
       <slot />
@@ -7,14 +7,14 @@
 
     <!-- Group -->
     <div v-else>
-      <div v-if="hasCheckboxLabel" class="q-mb-sm text-body1">
-        {{ props.label }}
+      <div v-if="hasCheckboxLabel" class="q-mb-sm text-body1" :class="checkboxLabelClasses">
+        {{ formattedLabel }}
       </div>
 
       <div :class="classes">
         <div v-for="(option, index) in props.options" :key="index">
           <!-- Com children -->
-          <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
+          <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)" />
 
           <!-- 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)" />
@@ -24,10 +24,15 @@
         </div>
       </div>
     </div>
+
+    <div v-if="props.errorMessage" class="q-pt-sm qas-checkbox__error-message text-negative">
+      {{ props.errorMessage }}
+    </div>
   </div>
 </template>
 
 <script setup>
+import { getRequiredLabel } from '../../helpers'
 import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
 defineOptions({
@@ -54,6 +59,19 @@ const props = defineProps({
   inline: {
     default: true,
     type: Boolean
+  },
+
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  error: {
+    type: Boolean
+  },
+
+  required: {
+    type: Boolean
   }
 })
 
@@ -92,6 +110,14 @@ const singleAttributes = computed(() => {
   }
 })
 
+const checkboxLabelClasses = computed(() => {
+  return { 'text-negative': props.error }
+})
+
+const formattedLabel = computed(() => {
+  return getRequiredLabel({ label: props.label, required: props.required })
+})
+
 // watch
 watch(() => props.options, handleParent)
 
@@ -116,7 +142,7 @@ function setGroupIntersection (value, option, index) {
   const options = option.children.map(item => item.value)
   const intersection = options.filter(item => value.includes(item))
 
-  group.value[index] = intersection.length && (intersection.length === options.length ? true : null)
+  group.value[index] = intersection.length ? (intersection.length === options.length ? true : null) : false
 }
 
 function updateCheckbox (value, option, index) {
@@ -148,3 +174,12 @@ function getModelValue (index) {
   return group.value[index]
 }
 </script>
+
+<style lang="scss">
+.qas-checkbox {
+  &__error-message {
+    // Tamanho da fonte utilizada nos errors no q-field.
+    font-size: 11px;
+  }
+}
+</style>

package/src/components/checkbox/QasCheckbox.yml

@@ -26,6 +26,19 @@ props:
     default: []
     type: Array
 
+  error:
+    desc: Booleano que caso seja true a label passa a ter a cor vermelha.
+    type: Boolean
+
+  error-message:
+    desc: Mensagem de erro exibida na parte inferior do checkbox.
+    type: String
+
+  required:
+    desc: Controla se exibirá o sufixo "*" ao lado do texto.
+    default: false
+    type: Boolean
+
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.

package/src/components/field/QasField.vue

@@ -146,7 +146,7 @@ export default {
         time: { ...datetimeInput, useTimeOnly: true },
 
         boolean: { is: 'qas-toggle', label, ...error },
-        checkbox: { is: 'qas-checkbox', label, options, ...error },
+        checkbox: { is: 'qas-checkbox', label, options, ...error, required },
         radio: { is: 'qas-radio', label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },

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

@@ -24,7 +24,7 @@ props:
     default: {}
     type: Object
 
-  error:
+  errors:
     desc: Objeto contendo propriedades contendo a mensagem de erro.
     default: {}
     type: Object
@@ -55,7 +55,7 @@ props:
 
   gutter:
     desc: Espaçamento entre colunas.
-    default: lg
+    default: md
     type: [String, Boolean]
     examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
 

package/src/components/grid-generator/QasGridGenerator.vue

@@ -3,7 +3,7 @@
     <qas-header v-if="hasHeader" v-bind="props.headerProps" />
 
     <div :class="classes">
-      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClassses({ key })">
+      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClasses({ key })">
         <slot :field="field" :name="`field-${field.name}`">
           <qas-grid-item :use-ellipsis="hasEllipsis(field)" :use-inline="props.useInline">
             <template #header>
@@ -98,7 +98,7 @@ const props = defineProps({
 })
 
 // composables
-const { classes, getFieldClass } = useGenerator({ props })
+const { classes, getFieldClass } = useGenerator({ props, isGrid: true })
 
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
@@ -181,7 +181,7 @@ function setFieldsByResult () {
   fieldsByResult.value = getFieldsByResult()
 }
 
-function getContainerClassses ({ key }) {
+function getContainerClasses ({ key }) {
   if (props.useInline) return 'row justify-between col-12'
 
   return getFieldClass({ index: key, isGridGenerator: true })

package/src/components/grid-generator/QasGridGenerator.yml

@@ -36,8 +36,8 @@ props:
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
   gutter:
-    desc: Espaçamento entre colunas.
-    default: lg
+    desc: Em caso de uso inline o default é "sm" senão é "md".
+    default: ''
     type: String
     examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl]
 

package/src/components/grid-item/QasGridItem.vue

@@ -65,8 +65,8 @@ const classes = computed(() => {
     },
 
     content: {
+      'text-grey-10': true,
       'text-body1': !isInline,
-      'text-grey-10': !isInline,
       'text-subtitle1': isInline,
       ellipsis: hasEllipsis.value
     }

package/src/components/text-truncate/QasTextTruncate.vue

@@ -2,7 +2,17 @@
   <div ref="parent" :class="classes">
     <div class="no-wrap row text-no-wrap">
       <div ref="truncate" class="ellipsis">
-        <slot>{{ formattedText }}</slot>
+        <slot>
+          <div v-if="hasBadges" class="items-center q-col-gutter-sm row" :class="badgeParentClasses">
+            <div v-for="(item, index) in normalizedBadgesList" :key="index">
+              <qas-badge v-bind="getBadgeProps(item)" />
+            </div>
+          </div>
+
+          <div v-else class="ellipsis">
+            {{ formattedText }}
+          </div>
+        </slot>
       </div>
 
       <qas-btn v-if="hasButton" class="q-ml-sm" :label="buttonLabel" @click.stop.prevent="toggle" />
@@ -10,7 +20,7 @@
 
     <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog">
       <template v-if="isCounterMode" #description>
-        <div class="q-col-gutter-y-md row">
+        <div class="q-col-gutter-y-sm row">
           <div
             v-for="(item, index) in normalizedList"
             :key="index"
@@ -25,6 +35,10 @@
 </template>
 
 <script setup>
+import QasDialog from '../dialog/QasDialog.vue'
+
+import { baseProps } from '../../shared/badge-config'
+
 import {
   computed,
   onMounted,
@@ -33,9 +47,6 @@ import {
   watch
 } from 'vue'
 
-import QasDialog from '../dialog/QasDialog.vue'
-
-// define component name
 defineOptions({ name: 'QasTextTruncate' })
 
 // props
@@ -55,6 +66,11 @@ const props = defineProps({
     default: ''
   },
 
+  emptyText: {
+    type: String,
+    default: '-'
+  },
+
   maxWidth: {
     type: Number,
     default: 0
@@ -85,13 +101,16 @@ const props = defineProps({
     default: () => []
   },
 
+  useBadge: {
+    type: Boolean
+  },
+
   useObjectList: {
     type: Boolean
   },
 
-  emptyText: {
-    type: String,
-    default: '-'
+  useWrapBadge: {
+    type: Boolean
   }
 })
 
@@ -100,11 +119,18 @@ const truncate = ref(null)
 const parent = ref(null)
 
 // composable
+const {
+  hasBadges,
+  badgeParentClasses,
+  normalizedBadgesList,
+  getBadgeProps
+} = useBadgeHandler()
+
 const {
   textContent,
   isTruncated,
   truncateText
-} = useTruncate({ parent, props })
+} = useTruncate({ parent, props, hasBadges })
 
 const {
   defaultProps,
@@ -122,6 +148,7 @@ const {
 
 useMutationObserver({ truncate, callbackFn: truncateText })
 
+// computeds
 const classes = computed(() => [`text-${props.color}`, `text-${props.typography}`])
 
 const formattedText = computed(() => props.list.length || props.text ? displayText.value : props.emptyText)
@@ -182,7 +209,7 @@ function useMutationObserver ({ truncate, callbackFn = () => {} }) {
   }
 }
 
-function useTruncate ({ parent, props }) {
+function useTruncate ({ parent, props, hasBadges }) {
   // reactive vars
   const maxPossibleWidth = ref('')
   const textContent = ref('')
@@ -191,14 +218,17 @@ function useTruncate ({ parent, props }) {
   // lifecycle
   onMounted(() => truncateText())
 
-  // watch
-  watch(() => props.maxWidth, truncateText)
-
   // computed
   const isTruncated = computed(() => textWidth.value > maxPossibleWidth.value)
 
+  // watch
+  watch(() => props.maxWidth, truncateText)
+
   // functions
   function truncateText () {
+    // Se tiver badges, então não pode ser feito calculo de width.
+    if (hasBadges.value) return
+
     parent.value.style.maxWidth = '100%'
     textWidth.value = truncate.value.clientWidth
     textContent.value = truncate.value?.innerHTML
@@ -271,4 +301,34 @@ function useCounter () {
     counterLabel
   }
 }
+
+function useBadgeHandler () {
+  const hasBadges = computed(() => props.useBadge && props.useObjectList && props.list.length)
+
+  const normalizedBadgesList = computed(() => props.list.slice(0, props.maxVisibleItem))
+  const badgeParentClasses = computed(() => ({ 'no-wrap': !props.useWrapBadge }))
+
+  function getBadgeProps (item) {
+    const itemProps = {}
+
+    /**
+     * recupera somente keys que estão em baseProps do QasBadge
+     * pra evitar que passe propriedades desnecessárias
+     */
+    for (const key in item) {
+      if (baseProps[key]) {
+        itemProps[key] = item[key]
+      }
+    }
+
+    return itemProps
+  }
+
+  return {
+    hasBadges,
+    badgeParentClasses,
+    normalizedBadgesList,
+    getBadgeProps
+  }
+}
 </script>

package/src/components/text-truncate/QasTextTruncate.yml

@@ -18,6 +18,10 @@ props:
     desc: Seta o título do dialog.
     type: String
 
+  empty-text:
+    desc: Texto a ser exibido no caso de não houver itens no "list" ou o "text" for vazio.
+    type: String
+
   max-width:
     desc: Seta o tamanho máximo do texto.
     type: Number
@@ -47,13 +51,20 @@ props:
     default: []
     type: Array
 
+  use-badge:
+    desc: Habilita badges para cada item da lista.
+    default: false
+    type: Boolean
+
   use-object-list:
     desc: Utiliza a propriedade "list" como array de objeto contendo label (uso junto a prop list).
+    default: false
     type: Boolean
 
-  empty-text:
-    desc: Texto a ser exibido no caso de não houver itens no "list" ou o "text" for vazio.
-    type: String
+  use-wrap-badge:
+    desc: habilita a quebra de linha das badges quando o texto for muito grande.
+    default: false
+    type: Boolean
 
 slots:
   default:

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

@@ -1,6 +1,8 @@
-import { computed } from 'vue'
 import { Spacing } from '../../enums/Spacing'
 import { gutterValidator } from '../../helpers/private/gutter-validator'
+import useScreen from '../use-screen'
+
+import { computed } from 'vue'
 
 const IRREGULAR_CLASSES = ['col', 'col-auto', 'fit']
 
@@ -21,7 +23,7 @@ export const baseProps = {
   },
 
   gutter: {
-    default: Spacing.Md,
+    default: undefined,
     type: [String, Boolean],
     validator: gutterValidator
   }
@@ -34,20 +36,33 @@ export const baseProps = {
  * @name useGenerator
  * @param {Object} options - Opções do componente.
  * @param {baseProps} options.props - Propriedades do componente.
+ * @param {boolean} options.isGrid - Propriedades do componente.
  * @returns {{
  *  classes: classes,
  *  getFieldClass: getFieldClass
  * }}
  */
-export default function ({ props = {} }) {
+export default function ({ props = {}, isGrid = false }) {
+  const screen = useScreen()
+
+  /**
+   * Se a propriedade gutter não for passada, será calculada automaticamente.
+   * se for usado no grid e for inline, o gutter será menor.
+   */
+  const defaultGutter = computed(() => {
+    if (props.gutter !== undefined) return props.gutter
+
+    return isGrid && (props.useInline && !screen.isSmall) ? Spacing.Sm : Spacing.Md
+  })
+
   /**
    * @type {{ value: string[] | string }}
    */
   const classes = computed(() => {
     const classesList = ['row']
 
-    if (props.gutter) {
-      classesList.push(`q-col-gutter-${props.gutter}`)
+    if (defaultGutter.value) {
+      classesList.push(`q-col-gutter-${defaultGutter.value}`)
     }
 
     return classesList

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/composables/private/use-auth-user.js

@@ -1,17 +0,0 @@
-import { LocalStorage } from 'quasar'
-
-import { ref } from 'vue'
-
-const user = ref(LocalStorage.getItem('user'))
-
-export default function useAuthUser () {
-  window.addEventListener('message', ({ data }) => {
-    if (data.type !== 'updateUser') return
-
-    user.value = data.user
-  })
-
-  return {
-    user
-  }
-}