@bildvitta/quasar-ui-asteroid 3.19.0-beta.3 → 3.19.0-beta.4

package/package.json

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

package/src/asteroid.js

@@ -77,8 +77,10 @@ export const QasTableGenerator = defineAsyncComponent(() => import('./components
 export const QasTabsGenerator = defineAsyncComponent(() => import('./components/tabs-generator/QasTabsGenerator.vue'))
 export const QasTextTruncate = defineAsyncComponent(() => import('./components/text-truncate/QasTextTruncate.vue'))
 export const QasTimeline = defineAsyncComponent(() => import('./components/timeline/QasTimeline.vue'))
+export const QasTip = defineAsyncComponent(() => import('./components/tip/QasTip.vue'))
 export const QasToggle = defineAsyncComponent(() => import('./components/toggle/QasToggle.vue'))
 export const QasToggleVisibility = defineAsyncComponent(() => import('./components/toggle-visibility/QasToggleVisibility.vue'))
+export const QasTooltip = defineAsyncComponent(() => import('./components/tooltip/QasTooltip.vue'))
 export const QasTransfer = defineAsyncComponent(() => import('./components/transfer/QasTransfer.vue'))
 export const QasTreeGenerator = defineAsyncComponent(() => import('./components/tree-generator/QasTreeGenerator.vue'))
 export const QasUploader = defineAsyncComponent(() => import('./components/uploader/QasUploader.vue'))

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

@@ -24,7 +24,7 @@
               </div>
             </div>
 
-            <div v-if="fieldsetItem.__hasSubset" class="column q-col-gutter-y-xl q-mt-none">
+            <div v-if="fieldsetItem.__hasSubset" class="column q-col-gutter-y-md q-mt-none">
               <div v-for="(subsetItem, subsetKey) in fieldsetItem.subset" :key="subsetKey" class="col-12">
                 <slot :name="`legend-${fieldsetItemKey}-${subsetKey}`">
                   <qas-header v-if="subsetItem.__hasHeader" v-bind="getHeaderProps({ values: subsetItem, isSubset: true} )" />
@@ -127,7 +127,13 @@ const emit = defineEmits(['update:modelValue'])
 provide('isFormGenerator', true)
 
 // composables
-const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
+const {
+  classes,
+  getFieldClass,
+  getFieldSetColumnClass,
+  getHeaderProps,
+  getNormalizedFields
+} = useGenerator({ props })
 
 const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
@@ -189,70 +195,13 @@ const normalizedFields = computed(() => {
     }
   }
 
-  return getNormalizedFields(props.fieldset)
+  return getNormalizedFields({
+    items: props.fieldset,
+    fields: props.fields,
+    result: props.modelValue
+  })
 })
 
-/**
- * Função recursiva na qual se é utilizada para definir a estrutura de um fieldset e também de um subset (presente dentro do fieldset).
- *
- * @param items {Object} items - Objeto contendo a estrutura de um fieldset ou subset
- */
-function getNormalizedFields (items) {
-  const result = {}
-
-  for (const key in items) {
-    const item = items[key]
-
-    // Propriedades que são recebidas em cada fieldset / subset desconstruida
-    const {
-      label,
-      description,
-      headerProps,
-      column,
-      buttonProps,
-      fields = [],
-      subset = {}
-    } = item
-
-    // Valida caso tenha um header
-    const hasHeader = !!(label || description || Object.keys(headerProps || {}).length)
-
-    // Valida caso tenha um subset dentro de um fieldset
-    const hasSubset = !!Object.keys(subset).length
-
-    // Estrutura de um fieldset e subset
-    const structure = {
-      label,
-      description,
-      column,
-      buttonProps,
-      headerProps,
-      fields: {},
-      subset: hasSubset ? getNormalizedFields(subset) : {},
-
-      // Propriedades auxiliares para controle na view
-      __hasHeader: hasHeader,
-      __hasSubset: hasSubset,
-      __hasFieldset: true
-    }
-
-    // Percorre as lista de fields (keys) que estão dentro do fieldset / subset
-    fields.forEach(fieldKey => {
-      // Encontra dentro da prop fields o field correspondente a key
-      const field = props.fields[fieldKey]
-
-      if (!field) return
-
-      // Adiciona o field ao fields da estrutura
-      Object.assign(structure.fields, { [fieldKey]: field })
-    })
-
-    result[key] = structure
-  }
-
-  return result
-}
-
 const fieldContainerClasses = computed(() => {
   return [
     ...classes.value,
@@ -267,34 +216,6 @@ function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
 
-/**
- * Retorna as propriedades de um header.
- *
- * @param {Object} values - Contém as propriedades de um fieldset/subset.
- * @param {Boolean} isSubset - Verifica se o header será usado em um subset.
- *
- * @returns {Object} Retorna as propriedades do header.
- */
-function getHeaderProps ({ values, isSubset }) {
-  const typography = isSubset ? 'h5' : 'h4'
-
-  // Separa as propriedades de label e o restante.
-  const { labelProps, ...headerProps } = values.headerProps || {}
-
-  return {
-    description: values.description,
-
-    // Mesmo que passado a tipografia no headerProps, a tipografia é sobreposta para manter a hierarquia sempre.
-    labelProps: {
-      ...labelProps,
-      ...(values.label && { label: values.label }),
-      typography
-    },
-
-    ...headerProps
-  }
-}
-
 function isFieldDisabled ({ disable }) {
   return disable || props.disable
 }

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

@@ -1,32 +1,76 @@
 <template>
   <component :is="component.is" v-bind="component.props">
-    <qas-header v-if="hasHeader" v-bind="props.headerProps" />
-
-    <div :class="classes">
-      <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>
-              <slot :field="field" :name="`header-field-${field.name}`">
-                <slot :field="field" name="header">
-                  <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
-                    {{ field.label }}
-                  </div>
+    <div class="column q-col-gutter-y-lg">
+      <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey">
+        <q-separator v-if="hasSeparator({ item: fieldsetItem })" class="q-mb-lg" />
+
+        <qas-header v-if="fieldsetItem.__hasHeader" v-bind="getHeaderProps({ values: fieldsetItem })" />
+
+        <div :class="classes">
+          <div v-for="(field, key) in fieldsetItem.fields" :key="key" :class="getContainerClasses({ key })">
+            <slot :field="field" :name="`field-${field.name}`">
+              <qas-grid-item v-bind="getGridItemProps(field)">
+                <template #header>
+                  <slot :field="field" :name="`header-field-${field.name}`">
+                    <slot :field="field" name="header">
+                      <div :class="headerClasses" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
+                        {{ field.label }}
+                      </div>
+                    </slot>
+                  </slot>
+                </template>
+
+                <template #content>
+                  <slot :field="field" :name="`content-field-${field.name}`">
+                    <slot :field="field" name="content">
+                      <div :class="getContentClasses(field)" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                        {{ field.formattedResult }}
+                      </div>
+                    </slot>
+                  </slot>
+                </template>
+              </qas-grid-item>
+            </slot>
+          </div>
+        </div>
+
+        <div v-if="fieldsetItem.__hasSubset" class="q-gutter-y-md q-mt-md">
+          <div v-for="(subsetItem, subsetKey) in fieldsetItem.subset" :key="subsetKey">
+            <div v-if="hasSeparator({ item: subsetItem, isSubset: true })" class="q-pb-md">
+              <q-separator />
+            </div>
+
+            <qas-header v-if="subsetItem.__hasHeader" v-bind="getHeaderProps({ values: subsetItem, isSubset: true })" />
+
+            <div :class="classes">
+              <div v-for="(field, key) in subsetItem.fields" :key="key" :class="getContainerClasses({ key })">
+                <slot :field="field" :name="`field-${field.name}`">
+                  <qas-grid-item v-bind="getGridItemProps(field)">
+                    <template #header>
+                      <slot :field="field" :name="`header-field-${field.name}`">
+                        <slot :field="field" name="header">
+                          <div :class="headerClasses" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
+                            {{ field.label }}
+                          </div>
+                        </slot>
+                      </slot>
+                    </template>
+
+                    <template #content>
+                      <slot :field="field" :name="`content-field-${field.name}`">
+                        <slot :field="field" name="content">
+                          <div :class="getContentClasses(field)" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                            {{ field.formattedResult }}
+                          </div>
+                        </slot>
+                      </slot>
+                    </template>
+                  </qas-grid-item>
                 </slot>
-              </slot>
-            </template>
-
-            <template #content>
-              <slot :field="field" :name="`content-field-${field.name}`">
-                <slot :field="field" name="content">
-                  <div :class="getContentClasses(field)" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-                    {{ field.formattedResult }}
-                  </div>
-                </slot>
-              </slot>
-            </template>
-          </qas-grid-item>
-        </slot>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </component>
@@ -38,10 +82,8 @@ import QasGridItem from '../grid-item/QasGridItem.vue'
 import QasHeader from '../header/QasHeader.vue'
 
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
-import { isEmpty, humanize } from '../../helpers'
 import { useScreen } from '../../composables'
-import isObject from 'lodash-es/isObject'
-import { ref, computed, watch } from 'vue'
+import { computed } from 'vue'
 
 // define component name
 defineOptions({ name: 'QasGridGenerator' })
@@ -58,13 +100,23 @@ const props = defineProps({
   },
 
   contentClass: {
-    default: '',
-    type: [Array, Object, String]
+    type: [Array, Object, String],
+    default: ''
+  },
+
+  fieldset: {
+    type: Object,
+    default: () => ({})
+  },
+
+  fieldsProps: {
+    type: Object,
+    default: () => ({})
   },
 
   headerClass: {
-    default: '',
-    type: [Array, Object, String]
+    type: [Array, Object, String],
+    default: ''
   },
 
   headerProps: {
@@ -73,13 +125,13 @@ const props = defineProps({
   },
 
   emptyResultText: {
-    default: '-',
-    type: String
+    type: String,
+    default: '-'
   },
 
   result: {
-    default: () => ({}),
-    type: Object
+    type: Object,
+    default: () => ({})
   },
 
   useBox: {
@@ -87,13 +139,13 @@ const props = defineProps({
   },
 
   useEmptyResult: {
-    default: true,
-    type: Boolean
+    type: Boolean,
+    default: true
   },
 
   useEllipsis: {
-    default: true,
-    type: Boolean
+    type: Boolean,
+    default: true
   },
 
   useInline: {
@@ -102,13 +154,15 @@ const props = defineProps({
 })
 
 // composables
-const { classes, getFieldClass } = useGenerator({ props, isGrid: true })
-
-// computed
-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 {
+  classes,
+  getFieldClass,
+  getHeaderProps,
+  getNormalizedFields,
+  getFieldsByResult
+} = useGenerator({ props, isGrid: true })
+
+// computeds
 const component = computed(() => {
   return {
     is: props.useBox ? QasBox : 'div',
@@ -116,7 +170,7 @@ const component = computed(() => {
   }
 })
 
-const headerClass = computed(() => {
+const headerClasses = computed(() => {
   return [
     props.headerClass,
 
@@ -126,65 +180,30 @@ const headerClass = computed(() => {
   ]
 })
 
-const fieldsByResult = ref({})
-
-/**
- * Retorna os "fields" formatados, caso a propriedade "useEmptyResult" seja "true", retorna todos os "fields", mesmo que não tenha resultado.
- * Caso a propriedade "useEmptyResult" seja "false", retorna apenas os "fields" que possuem resultado.
-*/
-const formattedFields = computed(() => {
-  if (props.useEmptyResult) return props.fields
-
-  if (!hasResult.value) return {}
-
-  const fields = {}
-
-  for (const key in props.fields) {
-    const result = props.result[key]
-
-    const validate = Array.isArray(result)
-      ? result.length
-      : isObject(result) ? Object.keys(result).length : result
-
-    if (validate) {
-      fields[key] = props.fields[key]
+const normalizedFields = computed(() => {
+  const hasFieldset = !!Object.keys(props.fieldset).length
+
+  // No caso de não ter "fieldset", virá via props o result e fields.
+  if (!hasFieldset) {
+    return {
+      default: {
+        fields: getFieldsByResult({ fields: props.fields, result: props.result }),
+        headerProps: props.headerProps,
+        __hasHeader: Object.keys(props.headerProps).length
+      }
     }
   }
 
-  return fields
+  // No caso de ter "fieldset", deve normalizar os fields/result de acordo com o fieldset.
+  return getNormalizedFields({
+    items: props.fieldset,
+    fields: props.fields,
+    result: props.result,
+    isGrid: true
+  })
 })
 
-// watch
-watch(() => formattedFields.value, setFieldsByResult, { immediate: true })
-
 // functions
-function getFieldsByResult () {
-  if (!hasResult.value || !hasFields.value) return {}
-
-  const result = { ...props.result }
-  const fieldsByResult = {}
-
-  for (const key in formattedFields.value) {
-    const field = formattedFields.value[key] || {}
-
-    if (!field.type) continue
-
-    const humanizedResult = humanize(field, result[key])
-    const formattedResult = isEmpty({ value: humanizedResult }) ? props.emptyResultText : humanizedResult
-
-    fieldsByResult[key] = {
-      ...field,
-      formattedResult
-    }
-  }
-
-  return fieldsByResult
-}
-
-function setFieldsByResult () {
-  fieldsByResult.value = getFieldsByResult()
-}
-
 function getContainerClasses ({ key }) {
   if (props.useInline) return 'row justify-between col-12'
 
@@ -211,4 +230,21 @@ function getContentClasses (field) {
     }
   ]
 }
+
+function getGridItemProps (field) {
+  return {
+    useEllipsis: hasEllipsis(field),
+    useInline: props.useInline,
+
+    ...(props.fieldsProps[field.name] || {})
+  }
+}
+
+function hasSeparator ({ item, isSubset }) {
+  /**
+   * No caso de for subset, por padrão terá o separator, à não ser que for passado
+   * o separator como false. Caso seja um fieldset, verificar se foi passado a chave "useSeparator".
+   */
+  return isSubset ? (item.useSeparator ?? true) : item.useSeparator
+}
 </script>

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

@@ -1,9 +1,13 @@
 <template>
   <div :class="classes.container">
-    <header v-bind="headerProps">
+    <header :class="classes.header">
       <slot name="header">
-        {{ props.label }}
+        <div v-bind="textAttributes">
+          {{ props.label }}
+        </div>
       </slot>
+
+      <qas-tip v-if="props.tip" class="q-ml-xs" :text="props.tip" />
     </header>
 
     <div v-bind="contentProps">
@@ -15,6 +19,7 @@
 </template>
 
 <script setup>
+import QasTip from '../tip/QasTip.vue'
 import { useScreen } from '../../composables'
 
 import { computed } from 'vue'
@@ -39,6 +44,16 @@ const props = defineProps({
   value: {
     type: [String, Number, Boolean],
     default: ''
+  },
+
+  tip: {
+    type: String,
+    default: ''
+  },
+
+  content: {
+    type: Object,
+    default: () => ({})
   }
 })
 
@@ -50,40 +65,50 @@ const hasEllipsis = computed(() => props.useEllipsis && !screen.isSmall)
 const classes = computed(() => {
   const isInline = props.useInline && !screen.isSmall
 
+  const { typography } = props.content
+
   return {
     container: {
-      flex: isInline,
-      'q-col-gutter-x-md': isInline,
-      'justify-between': isInline,
-      'col-12': isInline,
-      'no-wrap': isInline
+      'flex justify-between col-12 no-wrap': isInline
     },
 
     header: {
       'text-caption': !isInline,
-      'text-body1': isInline
+
+      /**
+       * Necessário adicionar o padding à direita no header ao invés do gutter, pois ao usar o gutter no eixo x,
+       * ele adiciona um espaçamento à direita do content de forma errada, deixando o espaçamento maior que o do header.
+       */
+      'text-body1 q-pr-md': isInline,
+
+      // classes por conta do tip.
+      'row no-wrap': props.tip,
+      'items-center': props.tip || typography,
+      flex: typography
     },
 
     content: {
       'text-grey-10': true,
-      'text-body1': !isInline,
-      'text-subtitle1': isInline,
+
+      // é possível passar uma tipografia personalizada.
+      [`text-${typography}`]: typography,
+
+      'text-body1': !isInline && !typography,
+      'text-subtitle1': isInline && !typography,
+
       ellipsis: hasEllipsis.value
     }
   }
 })
 
-const headerProps = computed(() => {
-  return {
-    class: classes.value.header,
-    ...(hasEllipsis.value && { title: props.label })
-  }
-})
-
 const contentProps = computed(() => {
   return {
     class: classes.value.content,
     ...(hasEllipsis.value && { title: props.value })
   }
 })
+
+const textAttributes = computed(() => {
+  return hasEllipsis.value ? { title: props.label } : undefined
+})
 </script>

package/src/components/tip/QasTip.vue

@@ -0,0 +1,48 @@
+<template>
+  <q-icon v-bind="iconProps" aria-hidden="false" :aria-label="props.text" class="qas-tip">
+    <qas-tooltip :text="props.text" />
+  </q-icon>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasTip' })
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: ''
+  },
+
+  icon: {
+    type: String,
+    default: 'sym_r_help'
+  },
+
+  size: {
+    type: String,
+    default: '16px'
+  },
+
+  color: {
+    type: String,
+    default: 'grey-8'
+  }
+})
+
+// computeds
+const iconProps = computed(() => {
+  return {
+    name: props.icon,
+    size: props.size,
+    color: props.color
+  }
+})
+</script>
+
+<style lang="scss">
+.qas-tip {
+  cursor: help;
+}
+</style>

package/src/components/tip/QasTip.yml

@@ -0,0 +1,26 @@
+type: component
+
+meta:
+  desc: Componente de dica com tooltip
+
+props:
+  text:
+    desc: Valor exibido no tooltip
+    default: ''
+    type: String
+
+  icon:
+    desc: Ícone utilizado no tip.
+    default: sym_r_help
+    type: String
+
+  size:
+    desc: Tamanho do ícone.
+    type: String
+    default: 16px
+    examples: ['sm', '24px']
+
+  color:
+    desc: Cor do ícone.
+    type: String
+    default: grey-8

package/src/components/tooltip/QasTooltip.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-tooltip v-bind="tooltipProps" class="bg-grey-10">
+    {{ props.text }}
+  </q-tooltip>
+</template>
+
+<script setup>
+defineOptions({ name: 'QasTooltip' })
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: ''
+  }
+})
+
+// consts
+const tooltipProps = {
+  anchor: 'center right',
+  self: 'center left',
+  offset: [5, 5]
+}
+</script>

package/src/components/tooltip/QasTooltip.yml

@@ -0,0 +1,10 @@
+type: component
+
+meta:
+  desc: Componente wrapper do [QTooltip](https://quasar.dev/vue-components/tooltip#introduction).
+
+props:
+  text:
+    desc: Texto exibido no tooltip
+    default: ''
+    type: String

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

@@ -1,6 +1,8 @@
+import isObject from 'lodash-es/isObject'
 import { Spacing } from '../../enums/Spacing'
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useScreen from '../use-screen'
+import { isEmpty, humanize, filterObject } from '../../helpers'
 
 import { computed } from 'vue'
 
@@ -90,6 +92,209 @@ export default function ({ props = {}, isGrid = false }) {
     return typeof column === 'string' ? _getStringColumns(column) : _getBreakpoint(column)
   }
 
+  /**
+   * Normaliza as propriedades do header, e a tipografia com base se é um subset.
+   *
+   * @function
+   * @param {Object} options
+   * @param {Object} options.values - Contém as propriedades de um fieldset/subset.
+   * @param {boolean} options.isSubset - Verifica se o header será usado em um subset.
+   *
+   * @returns {Object} Retorna as propriedades do header.
+   */
+  function getHeaderProps ({ values, isSubset }) {
+    const typography = isSubset ? 'h5' : 'h4'
+
+    // Separa as propriedades de label e o restante.
+    const { labelProps, ...headerProps } = values.headerProps || {}
+
+    return {
+      description: values.description,
+
+      // Mesmo que passado a tipografia no headerProps, a tipografia é sobreposta para manter a hierarquia sempre.
+      labelProps: {
+        ...labelProps,
+        ...(values.label && { label: values.label }),
+        typography
+      },
+
+      ...headerProps
+    }
+  }
+
+  /**
+   * Normaliza o objeto para retornar um fieldset.
+   *
+   * @function
+   * @param {Object} params
+   * @param {Object} params.items - Objeto contendo a estrutura de um fieldset ou subset
+   * @param {Object} params.fields - Campos
+   * @param {Object} params.result - Resultado com base nos fields
+   * @param {boolean} params.isGrid - Chave para indicar se é um grid-generator.
+   * @param {boolean} params.useEmptyResult - Se o resultado de algum campo for vazio e esta propriedade for "false", ele remove todo o campo.
+   *
+   * @returns {Object} - Retorna um objeto com a estrutura do fieldset.
+   */
+  function getNormalizedFields (params) {
+    const result = {}
+
+    for (const key in params.items) {
+      const item = params.items[key]
+
+      // Propriedades que são recebidas em cada fieldset / subset desconstruida
+      const {
+        label,
+        description,
+        headerProps,
+        column,
+        buttonProps,
+        fields = [],
+        subset = {},
+        useSeparator
+      } = item
+
+      // Valida caso tenha um header
+      const hasHeader = !!(label || description || Object.keys(headerProps || {}).length)
+
+      // Valida caso tenha um subset dentro de um fieldset
+      const hasSubset = !!Object.keys(subset).length
+
+      // Estrutura de um fieldset e subset
+      const structure = {
+        label,
+        description,
+        column,
+        buttonProps,
+        headerProps,
+        useSeparator,
+        fields: {},
+
+        subset: hasSubset
+          ? getNormalizedFields({
+            items: subset,
+            isGrid: params.isGrid,
+            fields: params.fields,
+            result: params.result,
+            useEmptyResult: params.useEmptyResult
+          })
+          : {},
+
+        // Propriedades auxiliares para controle na view
+        __hasHeader: hasHeader,
+        __hasSubset: hasSubset,
+        __hasFieldset: true
+      }
+
+      // Pegar os fields com base na key.
+      const fieldsByfieldsKeys = filterObject(params.fields, fields)
+
+      /**
+       * Foi adicionado essa lógica para o grid-generator, pois cada field deve ter o "formattedResult", onde o
+       * "formattedResult" é basicamente o result formatado com base no tipo do field através do humanize,
+       * exemplo: field do tipo "date", virá do back "2025-08-20", e deverá exibir "20/08/2025".
+       */
+      if (params.isGrid) {
+      // Adicionar "formattedResult" com base no result.
+        const formattedFields = getFieldsByResult({
+          fields: fieldsByfieldsKeys,
+          result: params.result,
+          useEmptyResult: params.useEmptyResult
+        })
+
+        // Adiciona o fields no structure
+        Object.assign(structure.fields, formattedFields)
+      } else {
+        Object.assign(structure.fields, fieldsByfieldsKeys)
+      }
+
+      result[key] = structure
+    }
+
+    return result
+  }
+
+  /**
+   * Para todos campos passados, adiciona o "formattedResult" já formatado com base no result
+   *
+   * @function
+   * @param {Object} params
+   * @param {Object} params.fields - Campos
+   * @param {Object} params.result - Resultado com base nos fields
+   * @param {boolean} params.useEmptyResult - Se o resultado de algum campo for vazio e esta propriedade for "false", ele remove todo o campo.
+   *
+   * @returns {Object} - Retorna os "fields" com um "formattedResult" pra cada field.
+   */
+  function getFieldsByResult ({ fields, result, useEmptyResult }) {
+    const hasFields = Object.keys(fields).length
+    const hasResult = Object.keys(result).length
+
+    if (!hasResult || !hasFields) return {}
+
+    const unformattedResult = { ...result }
+    const fieldsByResult = {}
+
+    /**
+     * Retorna os "fields" com base na prop "useEmptyResult". se ela for "false",
+     * ela remove todo campo com valor vazio.
+     */
+    const formattedFields = getFormattedFields({ fields, result, hasResult, useEmptyResult })
+
+    for (const key in formattedFields) {
+      const field = formattedFields[key] || {}
+
+      if (!field.type) continue
+
+      // Formata o result com base no "type", exemplo tipo date: "2025-08-20" -> "20/08/2025"
+      const humanizedResult = humanize(field, unformattedResult[key])
+
+      const formattedResult = isEmpty({ value: humanizedResult }) ? props.emptyResultText : humanizedResult
+
+      fieldsByResult[key] = {
+        ...field,
+        formattedResult
+      }
+    }
+
+    return fieldsByResult
+  }
+
+  /**
+   * @private
+   *
+   * @function
+   * @param {Object} params
+   * @param {Object} params.fields - Campos
+   * @param {Object} params.result - Resultado com base nos fields
+   * @param {boolean} params.hasResult - Casotenha resultado
+   * @param {boolean} params.useEmptyResult - Se o resultado de algum campo for vazio e esta propriedade for "false", ele remove todo o campo.
+   *
+   * @returns {Object} - Retorna os "fields" formatados, caso a propriedade "useEmptyResult" seja "true",
+   * retorna todos os "fields", mesmo que não tenha resultado. Caso a propriedade "useEmptyResult" seja "false",
+   * retorna apenas os "fields" que possuem resultado.
+   */
+  function getFormattedFields ({ fields, result, hasResult, useEmptyResult }) {
+    if (useEmptyResult) return fields
+
+    if (!hasResult) return {}
+
+    const formattedFields = {}
+
+    for (const key in fields) {
+      const currentResult = result[key]
+
+      // Verifica se o field tem result, caso tenha, adiciona no "formattedFields"
+      const validate = Array.isArray(currentResult)
+        ? currentResult.length
+        : isObject(currentResult) ? Object.keys(currentResult).length : result
+
+      if (validate) {
+        formattedFields[key] = fields[key]
+      }
+    }
+
+    return formattedFields
+  }
+
   /**
    * @private
    */
@@ -184,6 +389,10 @@ export default function ({ props = {}, isGrid = false }) {
     classes,
 
     getFieldClass,
-    getFieldSetColumnClass
+    getFieldSetColumnClass,
+
+    getHeaderProps,
+    getNormalizedFields,
+    getFieldsByResult
   }
 }