Merge pull request #1166 from bildvitta/feature/form-generator-header

Changes in QasFormGenerator and QasHeader

CHANGELOG.md

@@ -14,6 +14,10 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 ### Adicionado
 - `QasSelect`: Adicionado comportamento no qual é setado automaticamente caso o select for required e houver apenas uma opção.
 
+### Modificado
+- `QasFormGenerator`: Agora o fieldset implementa o componente `QasHeader`.
+- `QasHeader`: modificado espaçamento bottom padrão de `xl` para `md`.
+
 ## [3.17.0-beta.1] - 22-08-2024
 ### Adicionado
 - `QasFormGenerator`: Adicionado possibilidade de ter botão de ação por fieldset ao final dos fields.

docs/src/examples/QasFormGenerator/Fieldset.vue

@@ -39,7 +39,19 @@ export default {
           label: 'Informações pessoais',
           description: 'Informe o nome e email do usuário.',
           fields: ['isActive', 'name', 'email'],
-          column: '12'
+          column: '12',
+          headerProps: {
+            badges: [
+              {
+                label: 'Minha badge',
+                textColor: 'grey-10'
+              }
+            ],
+            buttonProps: {
+              label: 'Atualizar',
+              onClick: () => alert('Atualizando...')
+            }
+          }
         },
 
         address: {

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

@@ -19,14 +19,29 @@ Para saber mais sobre o **API Design Pattern** clice [aqui](https://www.notion.s
 <doc-example file="QasFormGenerator/Boxed" title="Com box" />
 
 :::tip
+##### Fieldset
+
 Muitas vezes precisamos adicionar rótulos (label) e descrições (description) a determinados blocos de campos para dar mais contexto, com esta propriedade conseguimos fazer isto de uma forma simples, sem a necessidade de abrir um slot para isto.
 
+> Observação: Se passar a key "label" dentro do `headerProps.labelProps` ela irá sobrescrever a label imediata do fieldset.
+
 ```js
 {
   personalInformation: {
     label: 'Informações pessoais',
     description: 'Informe o nome e email do usuário.'
-    fields: ['name', 'email']
+    fields: ['name', 'email'],
+    headerProps: {
+      badges: [
+        {
+          label: 'Minha badge',
+          textColor: 'grey-10'
+        }
+      ],
+      buttonProps: {
+        label: 'Atualizar'
+      }
+    }
   },
 
   another: {

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

@@ -2,10 +2,8 @@
   <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="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
-          <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 v-if="hasFieldsetItem(fieldsetItem)" :name="`legend-${fieldsetItemKey}`">
+          <qas-header v-bind="getHeaderProps(fieldsetItem)" />
         </slot>
 
         <div>
@@ -99,7 +97,7 @@ provide('isFormGenerator', true)
 // composables
 const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
 
-const { fieldsetClasses, hasFieldset } = useFieldset({ props })
+const { fieldsetClasses, hasFieldset, hasFieldsetItem } = useFieldset({ props })
 
 const screen = useScreen()
 
@@ -170,7 +168,8 @@ const normalizedFields = computed(() => {
       description: fieldsetItem.description,
       column: fieldsetItem.column,
       buttonProps: fieldsetItem.buttonProps,
-      fields: { hidden: {}, visible: {} }
+      fields: { hidden: {}, visible: {} },
+      headerProps: fieldsetItem.headerProps
     }
 
     fieldsetItem.fields.forEach(fieldName => {
@@ -203,8 +202,17 @@ function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
 
-function getLabelMargin (fieldsetItem) {
-  return fieldsetItem.description ? 'sm' : 'md'
+function getHeaderProps (fieldsetItem) {
+  return {
+    description: fieldsetItem.description,
+
+    labelProps: {
+      ...fieldsetItem.headerProps?.labelProps,
+      ...(fieldsetItem.label && { label: fieldsetItem.label })
+    },
+
+    ...fieldsetItem.headerProps
+  }
 }
 
 function isFieldDisabled ({ disable }) {
@@ -240,9 +248,15 @@ function useFieldset ({ props }) {
 
   const hasFieldset = computed(() => !!Object.keys(props.fieldset).length)
 
+  function hasFieldsetItem (fieldset = {}) {
+    return !!Object.keys(fieldset).length
+  }
+
   return {
     fieldsetClasses,
-    hasFieldset
+    hasFieldset,
+
+    hasFieldsetItem
   }
 }
 </script>

ui/src/components/header/QasHeader.vue

@@ -3,7 +3,7 @@
     <div v-if="hasLabelSection" class="items-center justify-between no-wrap row" :class="labelSectionClasses">
       <div class="items-center q-col-gutter-sm row">
         <slot name="label">
-          <qas-label v-bind="defaultLabelProps" />
+          <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
         </slot>
 
         <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
@@ -73,7 +73,7 @@ const props = defineProps({
   },
 
   spacing: {
-    default: Spacing.Xl,
+    default: Spacing.Md,
     type: String,
     validator: gutterValidator
   }
@@ -102,5 +102,5 @@ const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
 const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
 const hasDescriptionSection = computed(() => props.description || slots.description)
-const hasLabelSection = computed(() => hasLabel.value || slots.label)
+const hasLabelSection = computed(() => hasLabel.value || slots.label || hasBadges.value)
 </script>