Merge pull request #1090 from bildvitta/feature/qas-grid-generator-ad…

…justs

Feature/qas grid generator adjusts

CHANGELOG.md

@@ -10,7 +10,17 @@ Neste arquivo (CHANGELOG.MD) você encontrará somente as mudanças referentes a
 ### Sobre os "BREAKING CHANGES"
 Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de serem pequenas, podem alterar o comportamento da funcionalidade caso não seja feita uma atualização, **preste muita atenção** nas breaking changes dentro das versões quando existirem.
 
-## [Não publicado]
+## Não publicado
+### Adicionado
+- `QasGridGenerator`:
+  - Adicionado prop `useEllipsis` que por default é `true`, que irá adicionar a classe `ellipsis` em cada item do grid.
+  - Adicionado prop `useInline` para mudar a disposição dos campos para ser por linha, ou seja, header e content ocupando a linha toda.
+  - Adicionado title ao header e content ao utilizar a prop `useEllipsis`.
+- [`QasFormGenerator`, `QasGridGenerator`]: Adicionado prop `useCommonColumns` onde será possível passar um único objeto com seus breakpoints e será replicado para todos fields.
+
+### Corrigido
+- `QasGridGenerator`: Corrigido comportamento da propriedade `columns` quando passado com valores `col`, exemplo `{ lg: 'col' }`.
+
 ## [3.15.0-beta.11] - 18-04-2024
 ### Adicionado
 - `QasStepperFormView`: Adicionado componente de gerador de steppers de formulário, utilizando o `QasSteppers`.

docs/src/examples/QasGridGenerator/UseInline.vue

@@ -0,0 +1,22 @@
+<template>
+  <!-- Usando qas-single-view apenas para recuperar os dados -->
+  <qas-single-view v-model:fields="fields" v-model:result="result" :custom-id="customId" :entity="entity">
+    <template #default>
+      <qas-grid-generator :fields="fields" :result="result" use-inline />
+    </template>
+  </qas-single-view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'UsersList' })
+
+const fields = ref({})
+const result = ref({})
+
+const entity = 'users'
+
+// USAR SOMENTE SE NECESSÁRIO, AQUI PEGAMOS O ID DO USUÁRIO NO NOSSO MOCK DE DADOS
+const customId = '3102fad5-f14c-45d4-98e9-46ef0aa9580e'
+</script>

docs/src/pages/components/grid-generator.md

@@ -6,6 +6,19 @@ Componente para criação de textos dinâmicos.
 
 <doc-api file="grid-generator/QasGridGenerator" name="QasGridGenerator" />
 
+:::info
+Caso os breakpoints dos campos sejam todos iguais, exemplo:
+- Possuo os campos name e phone, e ambos precisam ter os breakpoints `{ xs: 12, lg: 6 }`.
+
+É possível passar o `columns` sem especificar os fields, somente um objeto com os breakpoints, mas
+é necessário utilizar a prop `use-common-columns` para que isso funcione.
+:::
+
+:::info
+Ao utilizar a prop `useInline`, o gutter passa a ter o valor `md`.
+:::
+
 ## Uso
 <doc-example file="QasGridGenerator/Basic" title="Básico" />
 <doc-example file="QasGridGenerator/Slots" title="Slots" />
+<doc-example file="QasGridGenerator/UseInline" title="Inline" />

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

@@ -2,7 +2,7 @@
   <div :class="fieldsetClasses">
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
       <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
-        <qas-label :label="fieldsetItem.label" />
+        <qas-label :label="fieldsetItem.label" :margin="getLabelMargin(fieldsetItem)" />
         <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
       </slot>
 
@@ -180,4 +180,8 @@ function useFieldset ({ props }) {
     hasFieldset
   }
 }
+
+function getLabelMargin (fieldsetItem) {
+  return fieldsetItem.description ? 'sm' : 'md'
+}
 </script>

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

@@ -8,7 +8,7 @@ props:
     desc: Colunas do grid de cada campo.
     default: col-6
     type: [Array, String, Object]
-    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
+    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12", "{ sm: 6, md: 12 }"]
 
   disable:
     desc: Deixa os campos desabilitados enviando a prop "disable" para cada campo.
@@ -63,6 +63,9 @@ props:
     default: []
     type: Array
 
+  use-common-columns:
+    desc: Utilizado quando passar a estrutura da prop "columns" sendo um objeto onde seus breakpoints serão replicados para todos fields.
+
 slots:
   'field-[nome-da-chave]':
     desc: Acessa o slot de um campo especifico.

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

@@ -1,15 +1,15 @@
 <template>
   <div :class="classes">
-    <div v-for="(field, key) in fieldsByResult" :key="key" :class="getFieldClass({ index: key, isGridGenerator: true })">
+    <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
       <slot :field="field" :name="`field-${field.name}`">
         <slot :field="field" name="header">
-          <header :class="props.headerClass" :data-cy="`grid-generator-${field.name}-field`">
+          <header :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
             {{ field.label }}
           </header>
         </slot>
 
         <slot :field="field" name="content">
-          <div :class="props.contentClass" :data-cy="`grid-generator-${field.name}-result`">
+          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
             {{ field.formattedResult }}
           </div>
         </slot>
@@ -21,12 +21,15 @@
 <script setup>
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { isEmpty, humanize } from '../../helpers'
+import { useScreen } from '../../composables'
 import { isObject } from 'lodash-es'
 import { ref, computed, watch } from 'vue'
 
 // define component name
 defineOptions({ name: 'QasGridGenerator' })
 
+const screen = useScreen()
+
 // props
 const props = defineProps({
   ...baseProps,
@@ -54,16 +57,65 @@ const props = defineProps({
   useEmptyResult: {
     default: true,
     type: Boolean
+  },
+
+  useEllipsis: {
+    default: true,
+    type: Boolean
+  },
+
+  useInline: {
+    type: Boolean
   }
 })
 
 // composables
-const { classes, getFieldClass } = useGenerator({ props })
+const { classes: useGeneratorClasses, getFieldClass } = useGenerator({ props })
 
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
 const hasFields = computed(() => Object.keys(props.fields).length)
 
+const contentClass = computed(() => {
+  if (!props.useEllipsis || (screen.isSmall && props.useEllipsis)) return props.contentClass
+
+  if (Array.isArray(props.contentClass)) {
+    return [...props.contentClass, 'ellipsis']
+  }
+
+  if (typeof props.contentClass === 'string') {
+    return `${props.contentClass} ellipsis`
+  }
+
+  return {
+    ...props.contentClass,
+    ellipsis: true
+  }
+})
+
+const headerClass = computed(() => {
+  if (!props.useEllipsis || (screen.isSmall && props.useEllipsis)) return props.headerClass
+
+  if (Array.isArray(props.headerClass)) {
+    return [...props.headerClass, 'ellipsis']
+  }
+
+  if (typeof props.headerClass === 'string') {
+    return `${props.headerClass} ellipsis`
+  }
+
+  return {
+    ...props.headerClass,
+    ellipsis: true
+  }
+})
+
+const classes = computed(() => {
+  if (props.useInline) return 'row q-col-gutter-md'
+
+  return useGeneratorClasses.value
+})
+
 const fieldsByResult = ref({})
 
 /**
@@ -122,4 +174,16 @@ function getFieldsByResult () {
 function setFieldsByResult () {
   fieldsByResult.value = getFieldsByResult()
 }
+
+function getContainerClass ({ key }) {
+  if (props.useInline) {
+    return 'row justify-between col-12'
+  }
+
+  return getFieldClass({ index: key, isGridGenerator: true })
+}
+
+function getTitle (field, key) {
+  return props.useEllipsis ? field[key] : ''
+}
 </script>

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

@@ -8,7 +8,7 @@ props:
     desc: Colunas do grid de cada campo.
     default: col-6
     type: [Array, String, Object]
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]", "{ sm: 6, md: 12 }"]
 
   content-class:
     desc: Classe de cada "div" pai referente ao resultado.
@@ -48,6 +48,18 @@ props:
     default: true
     type: Boolean
 
+  use-ellipsis:
+    desc: Adiciona a classe "ellipsis" para o elemento do conteúdo.
+    default: true
+    type: Boolean
+
+  use-inline:
+    desc: Adiciona a disposição dos campos por linha, ou seja, header e content ocupando a linha toda.
+    type: Boolean
+
+  use-common-columns:
+    desc: Usado quando precisa passar a prop "columns" como objeto sendo que será o valor comum para todos fields
+
 slots:
   content:
     desc: Slot para o conteúdo (content).

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

@@ -19,6 +19,10 @@ export const baseProps = {
     default: Spacing.Lg,
     type: [String, Boolean],
     validator: gutterValidator
+  },
+
+  useCommonColumns: {
+    type: Boolean
   }
 }
 
@@ -86,7 +90,11 @@ export default function ({ props = {} }) {
     for (const key in formattedColumns) {
       const value = formattedColumns[key]
 
-      classes.push(IRREGULAR_CLASSES.includes(value) ? value : `${profiles[key]}-${value}`)
+      if (IRREGULAR_CLASSES.includes(value)) {
+        classes.push(value === 'col' ? profiles[key] : value)
+      } else {
+        classes.push(`${profiles[key]}-${value}`)
+      }
     }
 
     return [...classes, renamedClasses]
@@ -103,10 +111,23 @@ export default function ({ props = {} }) {
    * @private
   */
   function _handleColumnsByField ({ index, isGridGenerator }) {
+    /*
+     * Quando é passado o columns como um único objeto que será replicado para todos fields.
+     */
+    if (props.useCommonColumns && Object.keys(props.columns).length) {
+      return _getBreakpoint(props.columns)
+    }
+
+    /*
+     * Quando não é passado columns, retornará o default.
+     */
     if (!props.columns[index]) {
       return _getDefaultColumnClass(isGridGenerator)
     }
 
+    /*
+     * Quando é passado um objeto por field.
+     */
     return _getBreakpoint(props.columns[index])
   }