@bildvitta/quasar-ui-asteroid 3.17.0-beta.3 → 3.17.0-beta.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.17.0-beta.3",
+  "version": "3.17.0-beta.5",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/actions/QasActions.vue

@@ -72,7 +72,7 @@ const classes = computed(() => {
 const columnClasses = computed(() => {
   if (props.useEqualWidth) return 'col-12 col-sm-6'
 
-  return props.useFullWidth ? 'col-12' : 'col-12 col-sm-auto'
+  return props.useFullWidth ? 'full-width' : 'col-12 col-sm-auto'
 })
 
 const hasPrimarySlot = computed(() => !!slots.primary)

package/src/components/chart-view/QasChartView.vue

@@ -1,23 +1,25 @@
 <template>
-  <qas-header v-if="hasHeader" v-bind="headerProps">
-    <template #right>
-      <qas-filters v-bind="chartFiltersProps" />
-    </template>
-  </qas-header>
-
-  <div v-bind="parentComponentProps">
-    <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
-
-    <div v-else-if="!isFetching">
-      <slot name="empty-results">
-        <qas-empty-result-text />
-      </slot>
+  <component :is="parentComponent.is" v-bind="parentComponent.props">
+    <qas-header v-if="hasHeader" v-bind="headerProps">
+      <template #right>
+        <qas-filters v-bind="chartFiltersProps" />
+      </template>
+    </qas-header>
+
+    <div v-bind="parentComponentProps">
+      <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
+
+      <div v-else-if="!isFetching">
+        <slot name="empty-results">
+          <qas-empty-result-text />
+        </slot>
+      </div>
+
+      <q-inner-loading :showing="isFetching">
+        <q-spinner color="grey" size="3em" />
+      </q-inner-loading>
     </div>
-
-    <q-inner-loading :showing="isFetching">
-      <q-spinner color="grey" size="3em" />
-    </q-inner-loading>
-  </div>
+  </component>
 </template>
 
 <script>
@@ -69,6 +71,11 @@ export default {
       type: Function
     },
 
+    boxProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     colorsList: {
       type: Array,
       default: () => []
@@ -124,6 +131,11 @@ export default {
       type: String
     },
 
+    useBox: {
+      type: Boolean,
+      default: true
+    },
+
     useFilterButton: {
       type: Boolean
     }
@@ -308,6 +320,16 @@ export default {
           label: this.title
         }
       }
+    },
+
+    parentComponent () {
+      return {
+        is: this.useBox ? 'qas-box' : 'div',
+
+        props: {
+          ...(this.useBox && { ...this.boxProps })
+        }
+      }
     }
   },
 

package/src/components/chart-view/QasChartView.yml

@@ -10,6 +10,11 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
   colors-list:
     desc: Lista de cores personalizadas para utilizar nos gráficos
     default: []
@@ -65,6 +70,11 @@ props:
     desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
     type: String
 
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: true
+    type: Boolean
+
   use-filter-button:
     desc: Controla se o componente vai usar ou não o componente "QasFilters".
     type: Boolean

package/src/components/dialog/QasDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <q-dialog ref="dialogRef" class="qas-dialog" :class="classes" data-cy="dialog" v-bind="dialogProps" :persistent="props.persistent" @update:model-value="updateModelValue">
-    <div class="bg-white q-pa-lg" :style="style">
-      <header v-if="hasHeader" class="q-mb-lg">
+    <div class="bg-white q-pa-md" :style="style">
+      <header v-if="hasHeader" class="q-mb-md">
         <slot name="header">
           <div class="items-center justify-between row">
-            <h5 class="text-h5" data-cy="dialog-title">{{ props.card.title }}</h5>
+            <qas-label data-cy="dialog-title" :label="props.card.title" margin="none" />
 
             <qas-btn v-if="isInfoDialog" v-close-popup color="grey-10" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
           </div>

package/src/components/filters/QasFilters.vue

@@ -160,7 +160,7 @@ export default {
           const field = { ...this.fields[key], ...this.formattedFieldsProps?.[decamelize(key)] }
           const value = humanize(field, this.normalizeValues(filters[key], field?.multiple))
 
-          if (!value) continue
+          if (!value || (Array.isArray(value) && !value.length)) continue
 
           const { label, name } = field
 

package/src/components/filters/private/PvFiltersButton.vue

@@ -1,6 +1,6 @@
 <template>
   <qas-btn data-cy="filters-btn" icon="sym_r_filter_alt" label="Filtrar" :use-label-on-small-screen="false" variant="tertiary">
-    <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" self="top right" v-bind="menuProps">
+    <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" v-bind="menuProps" no-refocus self="top right">
       <div v-if="loading" class="q-pa-xl text-center">
         <q-spinner color="grey" size="2em" />
       </div>

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

@@ -2,7 +2,7 @@
   <div :class="fieldsetClasses">
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" :class="getFieldSetColumnClass(fieldsetItem.column)">
       <component :is="containerComponent.is" v-bind="containerComponent.props">
-        <slot v-if="hasFieldsetItem(fieldsetItem)" :name="`legend-${fieldsetItemKey}`">
+        <slot v-if="fieldset.__isFieldset" :name="`legend-${fieldsetItemKey}`">
           <qas-header v-bind="getHeaderProps(fieldsetItem)" />
         </slot>
 
@@ -97,7 +97,7 @@ provide('isFormGenerator', true)
 // composables
 const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
 
-const { fieldsetClasses, hasFieldset, hasFieldsetItem } = useFieldset({ props })
+const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
 const screen = useScreen()
 
@@ -169,7 +169,10 @@ const normalizedFields = computed(() => {
       column: fieldsetItem.column,
       buttonProps: fieldsetItem.buttonProps,
       fields: { hidden: {}, visible: {} },
-      headerProps: fieldsetItem.headerProps
+      headerProps: fieldsetItem.headerProps,
+
+      // Indica que existe um fieldset para que o QasHeader possa ser renderizado
+      __isFieldset: true
     }
 
     fieldsetItem.fields.forEach(fieldName => {
@@ -248,15 +251,9 @@ function useFieldset ({ props }) {
 
   const hasFieldset = computed(() => !!Object.keys(props.fieldset).length)
 
-  function hasFieldsetItem (fieldset = {}) {
-    return !!Object.keys(fieldset).length
-  }
-
   return {
     fieldsetClasses,
-    hasFieldset,
-
-    hasFieldsetItem
+    hasFieldset
   }
 }
 </script>

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

@@ -3,9 +3,9 @@
     <qas-header v-if="hasHeader" v-bind="props.headerProps" />
 
     <div :class="classes">
-      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
+      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClassses({ key })">
         <slot :field="field" :name="`field-${field.name}`">
-          <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
+          <qas-grid-item :use-ellipsis="hasEllipsis(field)" :use-inline="props.useInline">
             <template #header>
               <slot :field="field" :name="`header-field-${field.name}`">
                 <slot :field="field" name="header">
@@ -19,7 +19,7 @@
             <template #content>
               <slot :field="field" :name="`content-field-${field.name}`">
                 <slot :field="field" name="content">
-                  <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                  <div :class="getContentClasses(field)" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
                     {{ field.formattedResult }}
                   </div>
                 </slot>
@@ -105,16 +105,6 @@ const hasResult = computed(() => Object.keys(props.result).length)
 const hasFields = computed(() => Object.keys(props.fields).length)
 const hasHeader = computed(() => Object.keys(props.headerProps).length)
 
-const contentClass = computed(() => {
-  return [
-    props.contentClass,
-
-    {
-      ellipsis: !screen.isSmall && props.useEllipsis
-    }
-  ]
-})
-
 const component = computed(() => {
   return {
     is: props.useBox ? 'qas-box' : 'div',
@@ -191,7 +181,7 @@ function setFieldsByResult () {
   fieldsByResult.value = getFieldsByResult()
 }
 
-function getContainerClass ({ key }) {
+function getContainerClassses ({ key }) {
   if (props.useInline) return 'row justify-between col-12'
 
   return getFieldClass({ index: key, isGridGenerator: true })
@@ -200,4 +190,21 @@ function getContainerClass ({ key }) {
 function getTitle (field, key) {
   return props.useEllipsis ? field[key] : ''
 }
+
+function hasEllipsis (field) {
+  /**
+   * Para campos do tipo "textarea" vamos sempre exibir o conteúdo por completo.
+   */
+  return (field.type === 'textarea') && !props.useInline ? false : props.useEllipsis
+}
+
+function getContentClasses (field) {
+  return [
+    props.contentClass,
+
+    {
+      ellipsis: !screen.isSmall && this.hasEllipsis(field)
+    }
+  ]
+}
 </script>

package/src/components/header/QasHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="containerClasses">
-    <div v-if="hasLabelSection" class="items-center justify-between no-wrap row" :class="labelSectionClasses">
+    <div v-if="hasLabelSection" class="full-width items-center justify-between no-wrap row" :class="labelSectionClasses">
       <div class="items-center q-col-gutter-sm row">
         <slot name="label">
           <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
@@ -14,13 +14,15 @@
       </div>
 
       <slot name="actions">
-        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
+        <div class="q-mt-xs text-right">
+          <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
 
-        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
+          <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
+        </div>
       </slot>
     </div>
 
-    <div class="items-start justify-between no-wrap q-col-gutter-sm row">
+    <div class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
       <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
         <slot name="description">
           {{ props.description }}
@@ -90,13 +92,21 @@ const labelSectionClasses = computed(() => {
   }
 })
 
+const descriptionSectionClasses = computed(() => {
+  return {
+    'justify-between': hasDescriptionSection.value,
+    'justify-end': hasActionsSection.value && !hasDescriptionSection.value
+  }
+})
+
 const defaultLabelProps = computed(() => {
   return {
-    margin: hasBadges.value ? 'none' : 'xs',
+    margin: 'none',
     ...props.labelProps
   }
 })
 
+const hasActionsSection = computed(() => !!slots.actions || hasDefaultButton.value || hasDefaultActionsMenu.value)
 const hasBadges = computed(() => !!props.badges.length)
 const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)

package/src/components/nested-fields/QasNestedFields.vue

@@ -2,24 +2,20 @@
   <div :id="fieldName" class="qas-nested-fields" :data-cy="`nested-fields-${fieldName}`">
     <component :is="containerComponent">
       <div v-if="useSingleLabel" class="text-left">
-        <qas-label :label="fieldLabel" typography="h5" />
+        <qas-label :label="fieldLabel" />
       </div>
 
       <div ref="inputContent">
         <component :is="componentTag" v-bind="componentProps">
           <template v-for="(row, index) in nested" :key="`row-${index}`">
             <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item" data-cy="nested-fields-item">
-              <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
-                <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" typography="h5" />
-
-                <qas-actions-menu v-if="hasBlockActions(row)" v-bind="getActionsMenuProps(index, row)" :use-label="false" />
-              </header>
+              <qas-header v-if="hasHeader({ row })" class="flex" v-bind="getHeaderProps({ index, row })" />
 
               <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="before-fields" :update-value="updateValuesFromInput" />
 
-              <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
+              <div ref="formGenerator" :class="formGeneratorParentClasses">
                 <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" name="fields" :update-value="updateValuesFromInput">
-                  <qas-form-generator v-model="nested[index]" class="col" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" :gutter="formGutter" @update:model-value="updateValuesFromInput($event, index)">
+                  <qas-form-generator v-model="nested[index]" class="col" :columns="formColumns" :common-columns="formCommonColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" :gutter="formGutter" @update:model-value="updateValuesFromInput($event, index)">
                     <template v-for="(slot, key) in $slots" #[key]="scope">
                       <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
                     </template>
@@ -27,7 +23,7 @@
                 </slot>
 
                 <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                  <qas-actions-menu v-bind="getActionsMenuProps(index, row)" :use-label="false" />
+                  <qas-actions-menu v-bind="getInlineActionsMenuProps(index, row)" :use-label="false" />
                 </div>
               </div>
 
@@ -36,7 +32,7 @@
           </template>
         </component>
 
-        <div v-if="useAdd">
+        <div v-if="useAdd" :class="addButtonClass">
           <slot :add="add" name="add-input">
             <div v-if="showAddFirstInputButton" class="text-left">
               <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" :label="addFirstInputLabel" variant="tertiary" @click="add()" />
@@ -70,7 +66,7 @@ import QasInput from '../input/QasInput.vue'
 import QasLabel from '../label/QasLabel.vue'
 
 import { constructObject } from '../../helpers'
-import { Spacing } from '../../enums/Spacing'
+import { Spacing, SpacingWithNumber } from '../../enums/Spacing'
 
 import { TransitionGroup } from 'vue'
 import debug from 'debug'
@@ -167,12 +163,22 @@ export default {
       default: () => []
     },
 
+    formCommonColumns: {
+      type: [Object, String],
+      default: () => ({})
+    },
+
     formGutter: {
-      default: Spacing.Lg,
+      default: Spacing.Md,
       type: [String, Boolean],
       validator: value => typeof value === 'boolean' || Object.values(Spacing).includes(value)
     },
 
+    headerProps: {
+      type: Function,
+      default: () => {}
+    },
+
     identifierItemKey: {
       type: String,
       default: 'uuid'
@@ -296,15 +302,14 @@ export default {
       return this.useFirstInputButton && !this.nested.length
     },
 
-    hasHeader () {
-      return (this.useSingleLabel && !this.useInlineActions) || !this.useSingleLabel
-    },
-
-    headerClasses () {
+    addButtonClass () {
       return {
-        'justify-end': this.useSingleLabel,
-        'justify-between': !this.useSingleLabel
+        'q-mt-md': !!this.nested.length
       }
+    },
+
+    formGeneratorParentClasses () {
+      return this.useInlineActions ? 'col-12 justify-between q-col-gutter-x-md row' : 'full-width'
     }
   },
 
@@ -333,8 +338,8 @@ export default {
   },
 
   methods: {
-    getActionsMenuProps (index, row) {
-      if (typeof this.actionsMenuProps === 'function') {
+    getInlineActionsMenuProps (index, row) {
+      if (typeof this.actionsMenuProps === 'function' && this.useInlineActions) {
         return this.actionsMenuProps({
           index,
           row,
@@ -344,7 +349,7 @@ export default {
 
       return {
         ...this.actionsMenuProps,
-        list: this.getActionsMenuList(index, row)
+        list: this.getActionsMenuList(index, row, this.actionsMenuProps?.list)
       }
     },
 
@@ -368,11 +373,11 @@ export default {
       return list
     },
 
-    getActionsMenuList (index, row) {
+    getActionsMenuList (index, row, defaultList = {}) {
       const list = this.getDefaultActionsMenuList(index, row)
 
-      for (const key in this.actionsMenuProps.list) {
-        const { handler, ...content } = this.actionsMenuProps.list[key] || {}
+      for (const key in defaultList) {
+        const { handler, ...content } = defaultList[key] || {}
 
         list[key] = {
           handler: payload => handler?.({ payload, row, index }),
@@ -456,14 +461,32 @@ export default {
 
     setScroll () {
       const elements = this.$refs.inputContent.children
+
+      // elemento de ação, e não das linhas (rows) de inputs
       const element = elements[elements.length - 1]
+
+      // ultima linha (rows) de inputs
+      const rowsElement = elements[0]?.children
+
+      // pegamos a posição do elemento de ação
       const { top } = element.getBoundingClientRect()
-      const pageOffset = window.pageYOffset
 
-      window.scrollTo({
-        behavior: 'smooth',
-        top: pageOffset + top
-      })
+      // pegamos a altura da ultima linha (rows) de inputs
+      const lastRowHeight = rowsElement?.[rowsElement.length - 1]?.clientHeight
+
+      // pegamos a posição da página
+      const pageOffset = window.scrollY
+
+      // 56 é a altura do header no mobile
+      const safeScrollSize = this.$qas.screen.isSmall ? 56 + SpacingWithNumber.Lg : SpacingWithNumber.Lg
+
+      /**
+       * É necessário descontar a altura da última linha (rows) de inputs para que o scroll
+       * fique no final da última linha (rows) de inputs.
+       */
+      const scrollTop = pageOffset + top - (lastRowHeight + safeScrollSize)
+
+      window.scrollTo({ behavior: 'smooth', top: scrollTop })
     },
 
     async setFocus () {
@@ -507,6 +530,41 @@ export default {
 
     hasInlineActions (row) {
       return this.useInlineActions && !this.isDisabledRow(row)
+    },
+
+    hasHeader ({ row }) {
+      return this.hasBlockActions(row) || !this.useSingleLabel
+    },
+
+    getHeaderProps ({ index, row }) {
+      const hasLabel = !this.useSingleLabel
+      const hasActions = this.hasBlockActions(row)
+
+      const { labelProps, actionsMenuProps, ...payload } = this.headerProps?.({ index, row }) || {}
+
+      return {
+        ...payload,
+
+        spacing: 'sm',
+
+        ...(hasActions && {
+          actionsMenuProps: {
+            useLabel: false,
+
+            ...actionsMenuProps,
+
+            list: this.getActionsMenuList(index, row, actionsMenuProps?.list)
+          }
+        }),
+
+        ...(hasLabel && {
+          labelProps: {
+            typography: 'h5',
+            label: this.getRowLabel(index),
+            ...labelProps
+          }
+        })
+      }
     }
   }
 }
@@ -514,16 +572,13 @@ export default {
 
 <style lang="scss">
 .qas-nested-fields {
+  // mesmo tamanho do input
   &__actions {
-    height: 56px;
-  }
-
-  &__field-item {
-    margin-bottom: var(--qas-spacing-md);
+    height: 40px;
   }
 
   &__field-item + &__field-item {
-    margin-top: var(--qas-spacing-xl);
+    margin-top: var(--qas-spacing-lg);
   }
 }
 </style>

package/src/components/nested-fields/QasNestedFields.yml

@@ -74,12 +74,34 @@ props:
     type: [Array, String, Object]
     examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
 
+  form-common-columns:
+    desc: Colunas do grid comuns.
+    default: {}
+    type: [String, Object]
+    examples: ["{ col: 12, sm: 6}" , "12"]
+
   form-gutter:
     desc: Espaçamento entre colunas do formulário.
     default: lg
     type: [String, Boolean]
     examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, false]
 
+  header-props:
+    desc: Propriedades do header do nested por linha por callback.
+    default: () => {}
+    type: Function
+    params:
+      context:
+        desc: Payload da linha (row) -> index/row.
+        type: Object
+        params:
+          index:
+            desc: Índice da linha.
+            type: Number
+          row:
+            desc: Valores contendo na linha atual.
+            type: Object
+
   identifier-item-key:
     desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.
     default: uuid
@@ -251,6 +273,7 @@ slots:
         type: Function
         examples: ["updateValue({ name: 'novo valor' }, 2)"]
 
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.

package/src/components/select/QasSelect.vue

@@ -30,6 +30,34 @@
       </qas-badge>
     </template>
 
+    <template v-if="useCustomOptions" #option="scope">
+      <q-item v-bind="scope.itemProps" class="qas-select__option">
+        <q-item-section>
+          <div class="items-center q-gutter-x-sm row">
+            <q-item-label>
+              {{ scope.opt.label }}
+            </q-item-label>
+
+            <div v-for="(badge, index) in getFilteredBadgeList(scope.opt)" :key="index">
+              <qas-badge v-if="hasBadge(badge)" v-bind="getBadgeProps(badge)" />
+            </div>
+          </div>
+
+          <div v-if="scope.opt.caption">
+            <div class="items-center q-col-gutter-x-sm row">
+              <q-item-label v-for="(caption, index) in getCaptionArray(scope.opt.caption)" :key="index" caption class="items-center q-mt-xs row">
+                <div>
+                  {{ caption }}
+                </div>
+
+                <q-separator v-if="hasSeparator({ caption: getCaptionArray(scope.opt.caption), index })" class="q-ml-sm" vertical />
+              </q-item-label>
+            </div>
+          </div>
+        </q-item-section>
+      </q-item>
+    </template>
+
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -50,6 +78,11 @@ export default {
   mixins: [searchFilterMixin],
 
   props: {
+    badgeProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     fuseOptions: {
       default: () => ({}),
       type: Object
@@ -83,6 +116,10 @@ export default {
       type: Boolean
     },
 
+    useCustomOptions: {
+      type: Boolean
+    },
+
     useFetchOptionsOnCreate: {
       default: true,
       type: Boolean
@@ -328,6 +365,51 @@ export default {
         : this.options[0]
 
       this.$emit('update:modelValue', modelValue)
+    },
+
+    getFilteredBadgeList (payload = {}) {
+      const { label, value, disable, caption, ...rest } = payload
+
+      const badgeList = []
+
+      /**
+       * Exemplo de estrutura percorrida:
+       *
+       * @example
+       * {
+       *   isTester: true,
+       *   isOwner: false
+       * }
+       */
+      for (const [key, val] of Object.entries(rest)) {
+        if (key in this.badgeProps) {
+          badgeList.push({ [key]: val })
+        }
+      }
+
+      return badgeList
+    },
+
+    getBadgeProps (badge) {
+      const model = Object.keys(badge)[0]
+
+      const isFunction = typeof this.badgeProps[model] === 'function'
+
+      return isFunction ? this.badgeProps[model](badge[model]).props : this.badgeProps[model]
+    },
+
+    hasBadge (badge) {
+      const model = Object.keys(badge)[0]
+
+      return badge[model] || this.badgeProps[model](badge[model]).show
+    },
+
+    getCaptionArray (caption) {
+      return Array.isArray(caption) ? caption : [caption]
+    },
+
+    hasSeparator ({ caption, index }) {
+      return index !== caption.length - 1
     }
   }
 }
@@ -353,6 +435,10 @@ export default {
     }
   }
 
+  &__option:hover .q-item__label--caption {
+    color: var(--q-primary);
+  }
+
   &--closed {
     .q-field__native span {
       white-space: nowrap;

package/src/components/select/QasSelect.yml

@@ -7,6 +7,12 @@ meta:
   desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
 
 props:
+  badge-list:
+    desc: Configuração das badges no qual cada key é um callback com o valor booleano retornado pelo back.
+    default: {}
+    examples: ["{ isTester: () => { return { color: 'grey-8', label: 'Tester', textColor: 'white' }} }"]
+    type: Object
+
   entity:
     desc: Entidade enviada para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
     default: ''

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

@@ -2,7 +2,7 @@
   <div ref="parent" :class="classes">
     <div class="no-wrap row text-no-wrap">
       <div ref="truncate" class="ellipsis">
-        <slot>{{ displayText }}</slot>
+        <slot>{{ formattedText }}</slot>
       </div>
 
       <qas-btn v-if="hasButton" class="q-ml-sm" :label="buttonLabel" @click.stop.prevent="toggle" />
@@ -87,6 +87,11 @@ const props = defineProps({
 
   useObjectList: {
     type: Boolean
+  },
+
+  emptyText: {
+    type: String,
+    default: '-'
   }
 })
 
@@ -119,6 +124,8 @@ useMutationObserver({ truncate, callbackFn: truncateText })
 
 const classes = computed(() => [`text-${props.color}`, `text-${props.typography}`])
 
+const formattedText = computed(() => props.list.length || props.text ? displayText.value : props.emptyText)
+
 // composable functions
 function useDialog ({ props, textContent }) {
   // reactive vars

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

@@ -51,6 +51,10 @@ props:
     desc: Utiliza a propriedade "list" como array de objeto contendo label (uso junto a prop list).
     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
+
 slots:
   default:
     desc: slot padrão que é utilizado para acessar o texto original (tanto o que é truncado quando o de dentro do dialog)

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

@@ -21,7 +21,7 @@ export const baseProps = {
   },
 
   gutter: {
-    default: undefined,
+    default: Spacing.Md,
     type: [String, Boolean],
     validator: gutterValidator
   }
@@ -46,19 +46,13 @@ export default function ({ props = {} }) {
   const classes = computed(() => {
     const classesList = ['row']
 
-    if (defaultGutter.value) {
-      classesList.push(`q-col-gutter-${defaultGutter.value}`)
+    if (props.gutter) {
+      classesList.push(`q-col-gutter-${props.gutter}`)
     }
 
     return classesList
   })
 
-  const defaultGutter = computed(() => {
-    if (props.gutter) return props.gutter
-
-    return props.useInline ? Spacing.Md : Spacing.Lg
-  })
-
   /**
    * @function
    * @param {Object} options

package/src/css/components/item.scss

@@ -27,13 +27,17 @@
 
   &--clickable:not(&--active) {
     color: $grey-10;
-    transition: color 300ms;
+    transition: var(--qas-generic-transition);
 
     &:not(&.q-router-link--active):hover {
       color: var(--q-primary-contrast);
     }
   }
 
+  &__label--caption {
+    transition: var(--qas-generic-transition);
+  }
+
   &__section--avatar {
     min-width: 0;
   }

package/src/enums/Spacing.js

@@ -63,3 +63,36 @@ export const SpacingWithUnit = {
   '4xl': '56px',
   '5xl': '64px'
 }
+
+/**
+ * Todas variáveis utilizadas para espaçamentos, com unidade de medida.
+ *
+ * @property
+ * @name SpacingWithUnit
+ * @readonly
+ * @enum
+ * @type {{
+ *  None: 0,
+ *  Xs: 4,
+ *  Sm: 8,
+ *  Md: 16,
+ *  Lg: 24,
+ *  Xl: 32,
+ *  '2xl': 40,
+ *  '3xl': 48,
+ *  '4xl': 56,
+ *  '5xl': 64
+ * }}
+*/
+export const SpacingWithNumber = {
+  None: 0,
+  Xs: 4,
+  Sm: 8,
+  Md: 16,
+  Lg: 24,
+  Xl: 32,
+  '2xl': 40,
+  '3xl': 48,
+  '4xl': 56,
+  '5xl': 64
+}