From 709f0c52438c0eb31729ef1c005a3086522af1dc Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Fri, 28 Jun 2024 18:38:50 -0300
Subject: [PATCH 01/22] chore: Update QasInput to use composition API and add
 placeholder support

---
 docs/src/examples/QasInput/Basic.vue | 15 +++++++--
 ui/src/components/field/QasField.vue | 15 ++++-----
 ui/src/components/input/QasInput.vue | 23 ++++++++++++--
 ui/src/css/components/field.scss     | 46 ++++++++++++++++++++++++++--
 ui/src/helpers/get-placeholder.js    | 19 ++++++++++++
 ui/src/helpers/index.js              |  1 +
 6 files changed, 104 insertions(+), 15 deletions(-)
 create mode 100644 ui/src/helpers/get-placeholder.js

diff --git a/docs/src/examples/QasInput/Basic.vue b/docs/src/examples/QasInput/Basic.vue
index c6b86f848..dd745b28d 100644
--- a/docs/src/examples/QasInput/Basic.vue
+++ b/docs/src/examples/QasInput/Basic.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="container q-py-lg">
-    <qas-input v-model="model" label="Meu input!" />
+  <div class="container q-py-lg row">
+    <qas-input v-model="model" class="col-4" label="Meu input">
+      <template #prepend>
+        <q-icon name="sym_r_search" size="xs" />
+        <!-- <q-icon name="sym_r_search" size="xs" /> -->
+      </template>
+      <template #append>
+        <q-icon name="sym_r_edit" size="xs" />
+        <!-- <q-icon name="sym_r_search" size="xs" /> -->
+      </template>
+    </qas-input>
 
-    Model: {{ model }}
+    <!-- Model: {{ model }} -->
   </div>
 </template>
 
diff --git a/ui/src/components/field/QasField.vue b/ui/src/components/field/QasField.vue
index 7405d376c..698f30801 100644
--- a/ui/src/components/field/QasField.vue
+++ b/ui/src/components/field/QasField.vue
@@ -61,24 +61,25 @@ export default {
   computed: {
     component () {
       const {
+        disable,
         entity,
         extensions,
+        filled,
         label,
+        mask,
+        maxFiles,
         maxlength,
         minlength,
         multiple,
         name,
         options,
+        placeholder,
+        places,
+        prefix,
         readonly,
         required,
-        disable,
-        filled = readonly,
         suffix,
-        prefix,
-        places,
         type,
-        mask,
-        maxFiles,
         useIso,
         useLazyLoading,
         useStrengthChecker
@@ -94,7 +95,6 @@ export default {
       const input = {
         label,
         hideBottomSpace: !error.error,
-        outlined: true,
         ...error,
         readonly,
         required,
@@ -103,6 +103,7 @@ export default {
         maxlength,
         minlength,
         suffix,
+        placeholder,
         prefix,
         useIso
       }
diff --git a/ui/src/components/input/QasInput.vue b/ui/src/components/input/QasInput.vue
index 2995707ad..4a53e6124 100644
--- a/ui/src/components/input/QasInput.vue
+++ b/ui/src/components/input/QasInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
+  <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { getRequiredLabel } from '../../helpers'
+import { getRequiredLabel, getPlaceholder } from '../../helpers'
 
 const Masks = {
   CompanyDocument: 'company-document',
@@ -23,6 +23,11 @@ export default {
   inheritAttrs: false,
 
   props: {
+    dense: {
+      default: true,
+      type: Boolean
+    },
+
     error: {
       type: Boolean
     },
@@ -43,7 +48,6 @@ export default {
     },
 
     outlined: {
-      default: true,
       type: Boolean
     },
 
@@ -119,6 +123,19 @@ export default {
       const { label } = this.$attrs
 
       return getRequiredLabel({ label, required: this.required })
+    },
+
+    // redesign
+    isTextarea () {
+      return this.$attrs.type === 'textarea'
+    },
+
+    placeholder () {
+      return this.$attrs.placeholder || getPlaceholder(this.mask || this.$attrs.type)
+    },
+
+    hasCounter () {
+      return this.$attrs.counter ?? (this.$attrs.maxlength && this.isTextarea)
     }
   },
 
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index abad1a05c..f86bd0f34 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -1,22 +1,64 @@
 .q-field {
+  $root: &;
+
+  .q-field__append,
+  .q-field__prepend {
+    will-change: transform;
+    transition: transform 0.3s;
+  }
+
+  .q-field__label {
+    will-change: transform;
+  }
+
   &__label,
   &--dense &__label {
-    @include set-typography($body1);
+    @include set-typography($caption);
+  }
+
+  &--dense {
+    .q-field__control {
+      height: 36px !important;
+    }
   }
 
   &__native,
   &__input,
   &--dense &__native,
   &--dense &__input {
-    @include set-typography($body1);
+    @include set-typography($body2);
 
     color: $grey-10;
+    // font-size: 14px;
 
     &::placeholder {
       color: $grey-6;
+      // font-size: 14px;
     }
   }
 
+  &--float,
+  &--focused {
+    transition: transform 0.3s;
+
+    .q-field__label {
+      transform: translate(-24px, -14px) !important;
+    }
+
+    .q-field__prepend {
+      transition: transform 0.3s;
+      transform: translateY(5px) !important;
+    }
+    .q-field__append {
+      transition: transform 0.3s;
+      transform: translateY(5px) !important;
+    }
+  }
+
+  // .q-field--dense.q-field--float .q-field__label {
+  //   transform: translateY(-50%) scale(0.75) !important;
+  // }
+
   &--outlined .q-field__control {
     background-color: white;
     border-radius: $generic-border-radius;
diff --git a/ui/src/helpers/get-placeholder.js b/ui/src/helpers/get-placeholder.js
new file mode 100644
index 000000000..0ef6b7c02
--- /dev/null
+++ b/ui/src/helpers/get-placeholder.js
@@ -0,0 +1,19 @@
+export default function getPlaceholder (type, defaultPlaceholder = 'Digite aqui...') {
+  const placeholders = {
+    'company-document': '00.000.000/0000-00',
+    date: 'dd/mm/aaaa',
+    datetime: 'dd/mm/aaaa hh:mm',
+    decimal: '0,00',
+    email: 'seuemail@exemplo.com',
+    integer: '0',
+    money: 'R$ 0,00',
+    percent: '0,00%',
+    'personal-document': '000.000.000-00',
+    phone: '(00) 00000-0000',
+    'postal-code': '00000-000',
+    'square-area': '0,00 m²',
+    time: 'hh:mm'
+  }
+
+  return placeholders[type] || defaultPlaceholder
+}
diff --git a/ui/src/helpers/index.js b/ui/src/helpers/index.js
index 154c21961..7997c6674 100644
--- a/ui/src/helpers/index.js
+++ b/ui/src/helpers/index.js
@@ -18,6 +18,7 @@ export { default as isEmpty } from './is-empty.js'
 export { default as isLocalDevelopment } from './is-local-development.js'
 export { default as promiseHandler } from './promise-handler.js'
 export { default as setScrollOnGrab } from './set-scroll-on-grab.js'
+export { default as getPlaceholder } from './get-placeholder.js'
 
 export * from './filters.js'
 export * from './images.js'

From 5fec92b57d07e03fd5a6e203124bacc032f4291b Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Mon, 1 Jul 2024 14:43:50 -0300
Subject: [PATCH 02/22] chore: Update QasInput icon size to medium and
 QasSingleView to use composition API and baseEmits instead of emitList

---
 docs/src/examples/QasInput/Basic.vue | 2 +-
 ui/src/css/components/field.scss     | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/src/examples/QasInput/Basic.vue b/docs/src/examples/QasInput/Basic.vue
index dd745b28d..2cfd38f70 100644
--- a/docs/src/examples/QasInput/Basic.vue
+++ b/docs/src/examples/QasInput/Basic.vue
@@ -2,7 +2,7 @@
   <div class="container q-py-lg row">
     <qas-input v-model="model" class="col-4" label="Meu input">
       <template #prepend>
-        <q-icon name="sym_r_search" size="xs" />
+        <q-icon name="sym_r_search" size="md" />
         <!-- <q-icon name="sym_r_search" size="xs" /> -->
       </template>
       <template #append>
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index f86bd0f34..e70d1fe0a 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -20,6 +20,10 @@
     .q-field__control {
       height: 36px !important;
     }
+
+    .q-icon {
+      font-size: 18px !important;
+    }
   }
 
   &__native,

From b159e3904ef68f8551c07d3252463c26bc8ee7f1 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Mon, 1 Jul 2024 16:40:34 -0300
Subject: [PATCH 03/22] chore: Update QasInput icon size and QasSingleView to
 use composition API

---
 docs/src/examples/QasInput/Basic.vue    |  3 +--
 docs/src/examples/QasInput/Textarea.vue | 19 ++++++++++++++
 docs/src/pages/components/input.md      |  5 ++--
 ui/src/components/input/QasInput.vue    | 34 ++++++++++++++++++++++++-
 ui/src/components/select/QasSelect.vue  |  2 +-
 ui/src/css/components/field.scss        | 26 ++++++++++++++++---
 6 files changed, 80 insertions(+), 9 deletions(-)
 create mode 100644 docs/src/examples/QasInput/Textarea.vue

diff --git a/docs/src/examples/QasInput/Basic.vue b/docs/src/examples/QasInput/Basic.vue
index 2cfd38f70..d01b60c0e 100644
--- a/docs/src/examples/QasInput/Basic.vue
+++ b/docs/src/examples/QasInput/Basic.vue
@@ -3,11 +3,10 @@
     <qas-input v-model="model" class="col-4" label="Meu input">
       <template #prepend>
         <q-icon name="sym_r_search" size="md" />
-        <!-- <q-icon name="sym_r_search" size="xs" /> -->
       </template>
       <template #append>
         <q-icon name="sym_r_edit" size="xs" />
-        <!-- <q-icon name="sym_r_search" size="xs" /> -->
+        <qas-btn icon="sym_r_search" />
       </template>
     </qas-input>
 
diff --git a/docs/src/examples/QasInput/Textarea.vue b/docs/src/examples/QasInput/Textarea.vue
new file mode 100644
index 000000000..a31429b99
--- /dev/null
+++ b/docs/src/examples/QasInput/Textarea.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="container q-py-lg row">
+    <qas-input v-model="model" class="col-4" label="Meu input" type="textarea" />
+    <qas-input v-model="model2" class="col-4" error error-message="Mensagem de erro" label="Meu input" type="textarea" />
+
+    Model: {{ model }}
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: '',
+      model2: ''
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/components/input.md b/docs/src/pages/components/input.md
index e885d9636..d55fe2bfb 100644
--- a/docs/src/pages/components/input.md
+++ b/docs/src/pages/components/input.md
@@ -41,5 +41,6 @@ Caso seja passado uma mask que não seja essas acima, será usado a que foi pass
 ## Uso
 
 <doc-example file="QasInput/Basic" title="Básico" />
-<doc-example file="QasInput/Required" title="Obrigatório" />
-<doc-example file="QasInput/Masks" title="Mascaras" />
+<doc-example file="QasInput/Textarea" title="Textarea" />
+<!-- <doc-example file="QasInput/Required" title="Obrigatório" /> -->
+<!-- <doc-example file="QasInput/Masks" title="Mascaras" /> -->
diff --git a/ui/src/components/input/QasInput.vue b/ui/src/components/input/QasInput.vue
index 4a53e6124..d14263d24 100644
--- a/ui/src/components/input/QasInput.vue
+++ b/ui/src/components/input/QasInput.vue
@@ -1,8 +1,16 @@
 <template>
-  <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
+  <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :class="classes" :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
+
+    <template v-if="icon" #append>
+      <q-icon :name="icon" size="xs" />
+    </template>
+
+    <template v-if="iconRight" #prepend>
+      <q-icon :name="iconRight" size="xs" />
+    </template>
   </q-input>
 </template>
 
@@ -62,6 +70,16 @@ export default {
 
     useRemoveErrorOnType: {
       type: Boolean
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    },
+
+    iconRight: {
+      type: String,
+      default: ''
     }
   },
 
@@ -126,6 +144,12 @@ export default {
     },
 
     // redesign
+    classes () {
+      return {
+        'qas-input--has-icon': this.hasAppend || this.hasPrepend
+      }
+    },
+
     isTextarea () {
       return this.$attrs.type === 'textarea'
     },
@@ -136,6 +160,14 @@ export default {
 
     hasCounter () {
       return this.$attrs.counter ?? (this.$attrs.maxlength && this.isTextarea)
+    },
+
+    hasPrepend () {
+      return !!this.$slots.prepend || this.iconRight
+    },
+
+    hasAppend () {
+      return !!this.$slots.append || this.icon
     }
   },
 
diff --git a/ui/src/components/select/QasSelect.vue b/ui/src/components/select/QasSelect.vue
index 015158029..a2a3dbd44 100644
--- a/ui/src/components/select/QasSelect.vue
+++ b/ui/src/components/select/QasSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes">
+  <q-select v-model="model" v-bind="attributes" dense :outlined="false">
     <template v-if="isSearchable" #prepend>
       <q-icon name="sym_r_search" />
     </template>
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index e70d1fe0a..1e22550b2 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -17,8 +17,21 @@
   }
 
   &--dense {
-    .q-field__control {
-      height: 36px !important;
+    .q-field__append,
+    .q-field__prepend {
+      height: 36px;
+    }
+
+    &:not(.q-textarea--autogrow) {
+      .q-field__control {
+        height: 36px !important;
+      }
+    }
+
+
+    .q-textarea {
+      max-height: 36px !important;
+      height: 100%;
     }
 
     .q-icon {
@@ -46,19 +59,26 @@
     transition: transform 0.3s;
 
     .q-field__label {
-      transform: translate(-24px, -14px) !important;
+      transform: translateY(-14px) !important;
     }
 
     .q-field__prepend {
       transition: transform 0.3s;
       transform: translateY(5px) !important;
     }
+
     .q-field__append {
       transition: transform 0.3s;
       transform: translateY(5px) !important;
     }
   }
 
+  &--float.qas-input--has-icon,
+  &--focused.qas-input--has-icon {
+    .q-field__label {
+      transform: translate(-24px, -14px) !important;
+    }
+  }
   // .q-field--dense.q-field--float .q-field__label {
   //   transform: translateY(-50%) scale(0.75) !important;
   // }

From 693b0d3b3b6f4c7fa64bc61819b5d3e7ca2c3b52 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Mon, 1 Jul 2024 17:23:09 -0300
Subject: [PATCH 04/22] chore: Update QasInput and QasSelect components

- Add "Meu input" label to QasInput component
- Add error prop to QasSelect component

Refactor QasInput and QasSelect components to use composition API and baseEmits instead of emitList
---
 docs/src/examples/QasInput/Basic.vue  |  1 +
 docs/src/examples/QasSelect/Basic.vue |  2 +-
 ui/src/css/components/field.scss      | 23 +++++++++++++----------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/src/examples/QasInput/Basic.vue b/docs/src/examples/QasInput/Basic.vue
index d01b60c0e..1a47d9daf 100644
--- a/docs/src/examples/QasInput/Basic.vue
+++ b/docs/src/examples/QasInput/Basic.vue
@@ -9,6 +9,7 @@
         <qas-btn icon="sym_r_search" />
       </template>
     </qas-input>
+    <qas-input v-model="model" class="col-4" label="Meu input" />
 
     <!-- Model: {{ model }} -->
   </div>
diff --git a/docs/src/examples/QasSelect/Basic.vue b/docs/src/examples/QasSelect/Basic.vue
index 8113e5166..c94a9ef82 100644
--- a/docs/src/examples/QasSelect/Basic.vue
+++ b/docs/src/examples/QasSelect/Basic.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container q-py-lg">
     <div>
-      <qas-select v-model="model" label="Meu select!" :options="options" />
+      <qas-select v-model="model" error label="Meu select!" :options="options" />
       Model: {{ model }}
     </div>
 
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index 1e22550b2..f5015ad91 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -19,18 +19,26 @@
   &--dense {
     .q-field__append,
     .q-field__prepend {
-      height: 36px;
+      // height: 36px;
+    }
+
+    .q-field__native {
+      // padding-bottom: var(--qas-spacing-xs) !important;
+    }
+
+    .q-field__control-container {
+      // padding-top: var(--qas-spacing-sm) !important;
     }
 
     &:not(.q-textarea--autogrow) {
       .q-field__control {
-        height: 36px !important;
+        // height: 36px !important;
       }
     }
 
 
     .q-textarea {
-      max-height: 36px !important;
+      // max-height: 36px !important;
       height: 100%;
     }
 
@@ -46,11 +54,9 @@
     @include set-typography($body2);
 
     color: $grey-10;
-    // font-size: 14px;
 
     &::placeholder {
       color: $grey-6;
-      // font-size: 14px;
     }
   }
 
@@ -64,12 +70,12 @@
 
     .q-field__prepend {
       transition: transform 0.3s;
-      transform: translateY(5px) !important;
+      transform: translateY(6px) !important;
     }
 
     .q-field__append {
       transition: transform 0.3s;
-      transform: translateY(5px) !important;
+      transform: translateY(6px) !important;
     }
   }
 
@@ -79,9 +85,6 @@
       transform: translate(-24px, -14px) !important;
     }
   }
-  // .q-field--dense.q-field--float .q-field__label {
-  //   transform: translateY(-50%) scale(0.75) !important;
-  // }
 
   &--outlined .q-field__control {
     background-color: white;

From 83b232c1596c46fb79a88e2e0f75386051399734 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Tue, 2 Jul 2024 12:39:07 -0300
Subject: [PATCH 05/22] chore: Update QasInput and QasSelect components

---
 docs/src/examples/QasInput/Basic.vue          | 15 +++++++---
 docs/src/examples/QasInput/Textarea.vue       |  5 ++--
 ui/src/components/input/QasInput.vue          |  2 +-
 .../nested-fields/QasNestedFields.vue         |  2 +-
 .../search-input/QasSearchInput.vue           | 26 ++---------------
 ui/src/css/components/field.scss              | 28 +++----------------
 6 files changed, 22 insertions(+), 56 deletions(-)

diff --git a/docs/src/examples/QasInput/Basic.vue b/docs/src/examples/QasInput/Basic.vue
index 1a47d9daf..f8cec7cf3 100644
--- a/docs/src/examples/QasInput/Basic.vue
+++ b/docs/src/examples/QasInput/Basic.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container q-py-lg row">
+  <div class="container q-col-gutter-sm q-py-lg row">
     <qas-input v-model="model" class="col-4" label="Meu input">
       <template #prepend>
         <q-icon name="sym_r_search" size="md" />
@@ -9,9 +9,16 @@
         <qas-btn icon="sym_r_search" />
       </template>
     </qas-input>
-    <qas-input v-model="model" class="col-4" label="Meu input" />
 
-    <!-- Model: {{ model }} -->
+    <qas-input v-model="model" class="col-4" disable label="Meu input">
+      <template #prepend>
+        <q-icon name="sym_r_search" size="md" />
+      </template>
+      <template #append>
+        <q-icon name="sym_r_edit" size="xs" />
+        <qas-btn icon="sym_r_search" />
+      </template>
+    </qas-input>
   </div>
 </template>
 
@@ -19,7 +26,7 @@
 export default {
   data () {
     return {
-      model: ''
+      model: '123'
     }
   }
 }
diff --git a/docs/src/examples/QasInput/Textarea.vue b/docs/src/examples/QasInput/Textarea.vue
index a31429b99..6e53c8c3d 100644
--- a/docs/src/examples/QasInput/Textarea.vue
+++ b/docs/src/examples/QasInput/Textarea.vue
@@ -1,9 +1,8 @@
 <template>
-  <div class="container q-py-lg row">
+  <div class="container q-col-gutter-2xl q-py-lg row">
     <qas-input v-model="model" class="col-4" label="Meu input" type="textarea" />
     <qas-input v-model="model2" class="col-4" error error-message="Mensagem de erro" label="Meu input" type="textarea" />
-
-    Model: {{ model }}
+    <qas-input v-model="model2" class="col-4" error error-message="Mensagem de erro" label="Meu input" />
   </div>
 </template>
 
diff --git a/ui/src/components/input/QasInput.vue b/ui/src/components/input/QasInput.vue
index d14263d24..4ee48acb2 100644
--- a/ui/src/components/input/QasInput.vue
+++ b/ui/src/components/input/QasInput.vue
@@ -146,7 +146,7 @@ export default {
     // redesign
     classes () {
       return {
-        'qas-input--has-icon': this.hasAppend || this.hasPrepend
+        'qas-input--has-icon': this.hasPrepend
       }
     },
 
diff --git a/ui/src/components/nested-fields/QasNestedFields.vue b/ui/src/components/nested-fields/QasNestedFields.vue
index 4851bf0c1..cce7f7578 100644
--- a/ui/src/components/nested-fields/QasNestedFields.vue
+++ b/ui/src/components/nested-fields/QasNestedFields.vue
@@ -42,7 +42,7 @@
 
           <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" data-cy="nested-fields-add-btn" @click="add()">
             <div class="col">
-              <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
+              <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" @focus="add()" />
             </div>
 
             <div class="col-auto">
diff --git a/ui/src/components/search-input/QasSearchInput.vue b/ui/src/components/search-input/QasSearchInput.vue
index 023ea2f87..180061ee2 100644
--- a/ui/src/components/search-input/QasSearchInput.vue
+++ b/ui/src/components/search-input/QasSearchInput.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="qas-filter-input">
-    <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
+  <div>
+    <qas-input ref="input" v-model="model" v-bind="$attrs" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+
         <qas-btn v-else color="grey-10" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
       </template>
 
@@ -76,24 +77,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.qas-filter-input {
-  position: relative;
-
-  .q-field {
-    &--dense .q-field__prepend {
-      padding-right: var(--qas-spacing-xs);
-    }
-
-    &--dense .q-field__append {
-      padding-left: var(--qas-spacing-sm);
-    }
-
-    &__native {
-      padding-bottom: var(--qas-spacing-sm);
-      padding-top: var(--qas-spacing-sm);
-    }
-  }
-}
-</style>
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index f5015ad91..f79af49d7 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -17,28 +17,7 @@
   }
 
   &--dense {
-    .q-field__append,
-    .q-field__prepend {
-      // height: 36px;
-    }
-
-    .q-field__native {
-      // padding-bottom: var(--qas-spacing-xs) !important;
-    }
-
-    .q-field__control-container {
-      // padding-top: var(--qas-spacing-sm) !important;
-    }
-
-    &:not(.q-textarea--autogrow) {
-      .q-field__control {
-        // height: 36px !important;
-      }
-    }
-
-
     .q-textarea {
-      // max-height: 36px !important;
       height: 100%;
     }
 
@@ -60,12 +39,13 @@
     }
   }
 
-  &--float,
-  &--focused {
+  // Somente fields com label
+  &--float.q-field--labeled,
+  &--focused.q-field--labeled {
     transition: transform 0.3s;
 
     .q-field__label {
-      transform: translateY(-14px) !important;
+      transform: translateY(-10px) !important;
     }
 
     .q-field__prepend {

From e708e90d2b2cb6dc633f06e30f0915553aa1fa5f Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Wed, 3 Jul 2024 10:43:07 -0300
Subject: [PATCH 06/22] refactor: Update QasSelect component to use composition
 API and improve styling

---
 docs/src/examples/QasSelect/Basic.vue  |  40 +++++++--
 ui/src/components/select/QasSelect.vue | 107 +++++++++++++++++++++++--
 ui/src/css/components/field.scss       |  14 +++-
 3 files changed, 143 insertions(+), 18 deletions(-)

diff --git a/docs/src/examples/QasSelect/Basic.vue b/docs/src/examples/QasSelect/Basic.vue
index c94a9ef82..c4ff9b7cd 100644
--- a/docs/src/examples/QasSelect/Basic.vue
+++ b/docs/src/examples/QasSelect/Basic.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="container q-py-lg">
-    <div>
+  <div class="container q-col-gutter-sm q-py-lg row">
+    <div class="col-6">
       <qas-select v-model="model" error label="Meu select!" :options="options" />
-      Model: {{ model }}
+      <!-- Model: {{ model }} -->
     </div>
 
-    <div class="q-mt-lg">
+    <div class="col-6">
       <qas-select v-model="model2" label="Meu select multiple" multiple :options="options" />
-      Model múltiplo: {{ model2 }}
+      <!-- Model múltiplo: {{ model2 }} -->
     </div>
   </div>
 </template>
@@ -25,7 +25,7 @@ export default {
     options () {
       return [
         {
-          label: 'Opção 1',
+          label: 'Opção 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec turpis.',
           value: 1
         },
         {
@@ -55,6 +55,34 @@ export default {
         {
           label: 'Opção 8',
           value: 8
+        },
+        {
+          label: 'Opção 9',
+          value: 9
+        },
+        {
+          label: 'Opção 10',
+          value: 10
+        },
+        {
+          label: 'Opção 11',
+          value: 11
+        },
+        {
+          label: 'Opção 12',
+          value: 12
+        },
+        {
+          label: 'Opção 13',
+          value: 13
+        },
+        {
+          label: 'Opção 14',
+          value: 14
+        },
+        {
+          label: 'Opção 15',
+          value: 15
         }
       ]
     }
diff --git a/ui/src/components/select/QasSelect.vue b/ui/src/components/select/QasSelect.vue
index a2a3dbd44..37b548ee5 100644
--- a/ui/src/components/select/QasSelect.vue
+++ b/ui/src/components/select/QasSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" dense :outlined="false">
+  <q-select v-model="model" v-bind="attributes" class="qas-select" :outlined="false">
     <template v-if="isSearchable" #prepend>
       <q-icon name="sym_r_search" />
     </template>
@@ -22,6 +22,25 @@
       </slot>
     </template>
 
+    <template v-if="attributes.useChips" #selected-item="{ opt, tabindex, index, removeAtIndex }">
+      <q-chip
+        class="q-px-sm q-py-xs"
+        color="light-blue-2"
+        dense
+        :disable="isDisabled"
+        icon-remove="sym_r_close"
+        removable
+        square
+        :tabindex="tabindex"
+        text-color="grey-9"
+        @remove="removeAtIndex(index)"
+      >
+        <div class="ellipsis" :title="opt.label">
+          {{ opt.label }}
+        </div>
+      </q-chip>
+    </template>
+
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -97,12 +116,17 @@ export default {
   computed: {
     attributes () {
       return {
-        class: 'qas-select',
+        class: this.componentClass,
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
         outlined: true,
-        popupContentClass: this.popupContentClass,
+
+        dense: true,
+        dropdownIcon: 'sym_r_expand_more',
+        clearIcon: 'sym_r_close',
+        popupContentClass: `qas-select__menu ${this.popupContentClass}`,
+        useChips: this.isMultiple && this.isPopupContentOpen,
 
         ...this.$attrs,
 
@@ -115,11 +139,16 @@ export default {
 
         ...(this.isSearchable && { onFilter: this.onFilter }),
 
-        ...(this.useLazyLoading && {
-          onPopupHide: this.onPopupHide,
-          onPopupShow: this.onPopupShow,
-          onVirtualScroll: this.mx_onVirtualScroll
-        })
+        onPopupHide: this.onPopupHide,
+        onPopupShow: this.onPopupShow,
+
+        ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll })
+
+        // ...(this.useLazyLoading && {
+        //   onPopupHide: this.onPopupHide,
+        //   onPopupShow: this.onPopupShow,
+        //   onVirtualScroll: this.mx_onVirtualScroll
+        // })
       }
     },
 
@@ -174,6 +203,27 @@ export default {
 
     formattedLabel () {
       return getRequiredLabel({ label: this.label, required: this.required })
+    },
+
+    // redesign
+    componentClass () {
+      return {
+        'qas-select--has-icon': this.isSearchable || this.hasAppend,
+        'qas-select--closed': !this.isPopupContentOpen,
+        'qas-select--loading': this.hasLoading
+      }
+    },
+
+    isDisabled () {
+      return this.$attrs.disable || this.$attrs.disable === ''
+    },
+
+    isMultiple () {
+      return this.$attrs.multiple || this.$attrs.multiple === ''
+    },
+
+    hasAppend () {
+      return !!this.$slots.append
     }
   },
 
@@ -289,5 +339,46 @@ export default {
       }
     }
   }
+
+  &__menu {
+    .q-item {
+      font-weight: 400 !important;
+    }
+  }
+
+  &--closed {
+    .q-field__native span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:not(.qas-select--loading) {
+      .q-field__native .q-field__input {
+        position: absolute;
+        caret-color: transparent;
+      }
+    }
+  }
+
+  .q-field__prepend,
+  .q-field__append {
+    .q-icon {
+      color: $grey-8;
+    }
+  }
+
+  .q-field__focusable-action {
+    opacity: 1;
+  }
+
+  .q-chip {
+    font-size: 11px;
+  }
+
+  .q-chip__icon--remove {
+    color: $grey-9;
+    opacity: 1;
+  }
 }
 </style>
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index f79af49d7..4703287c4 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -13,7 +13,7 @@
 
   &__label,
   &--dense &__label {
-    @include set-typography($caption);
+    @include set-typography($body2);
   }
 
   &--dense {
@@ -42,10 +42,10 @@
   // Somente fields com label
   &--float.q-field--labeled,
   &--focused.q-field--labeled {
-    transition: transform 0.3s;
+    transition: transform 0.3s, font-size 0.3s;
 
     .q-field__label {
-      transform: translateY(-10px) !important;
+      transform: translateY(-10px) scale(0.85) !important;
     }
 
     .q-field__prepend {
@@ -59,10 +59,16 @@
     }
   }
 
+  .q-field__label {
+    transition: transform 0.3s, font-size 0.3s;
+  }
+
+  &--float.qas-select--has-icon,
+  &--focused.qas-select--has-icon,
   &--float.qas-input--has-icon,
   &--focused.qas-input--has-icon {
     .q-field__label {
-      transform: translate(-24px, -14px) !important;
+      transform: translate(-24px, -14px) scale(0.85) !important;
     }
   }
 

From 914d9bafce8147d93836d4d85e667848ba7d13ed Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Fri, 2 Aug 2024 18:43:09 -0300
Subject: [PATCH 07/22] chore: Add QasRadio and QasToggle components

---
 docs/src/assets/menu.js                       |  8 ++
 docs/src/examples/QasFormGenerator/Boxed.vue  | 97 +++++++++++++++++++
 docs/src/examples/QasInput/Textarea.vue       | 14 ++-
 docs/src/examples/QasNumericInput/Basic.vue   |  2 +-
 docs/src/examples/QasRadio/Basic.vue          | 13 +++
 docs/src/examples/QasRadio/OptionGroup.vue    | 28 ++++++
 docs/src/examples/QasSelect/Basic.vue         |  8 +-
 docs/src/examples/QasToggle/Basic.vue         | 15 +++
 docs/src/pages/components/form-generator.md   |  1 +
 docs/src/pages/components/radio.md            | 15 +++
 docs/src/pages/components/toggle.md           | 13 +++
 ui/src/components/box/QasBox.vue              | 10 +-
 .../checkbox-group/QasCheckboxGroup.vue       |  6 +-
 .../date-time-input/QasDateTimeInput.vue      | 16 ++-
 ui/src/components/field/QasField.vue          |  6 +-
 .../filters/private/PvFiltersButton.vue       |  2 +-
 .../form-generator/QasFormGenerator.vue       | 60 ++++++++----
 .../form-generator/QasFormGenerator.yml       |  5 +
 ui/src/components/input/QasInput.vue          | 14 +--
 .../numeric-input/QasNumericInput.vue         | 41 +++++++-
 ui/src/components/radio/QasRadio.vue          | 55 +++++++++++
 ui/src/components/radio/QasRadio.yml          |  5 +
 .../search-input/QasSearchInput.vue           | 14 ++-
 ui/src/components/select/QasSelect.vue        | 14 +--
 .../table-generator/QasTableGenerator.vue     |  7 +-
 ui/src/components/toggle/QasToggle.vue        | 14 +++
 ui/src/components/toggle/QasToggle.yml        |  5 +
 ui/src/css/components/field.scss              |  2 +
 ui/src/css/components/radio.scss              |  6 +-
 ui/src/css/components/toggle.scss             | 18 +++-
 ui/src/vue-plugin.js                          |  6 ++
 31 files changed, 455 insertions(+), 65 deletions(-)
 create mode 100644 docs/src/examples/QasFormGenerator/Boxed.vue
 create mode 100644 docs/src/examples/QasRadio/Basic.vue
 create mode 100644 docs/src/examples/QasRadio/OptionGroup.vue
 create mode 100644 docs/src/examples/QasToggle/Basic.vue
 create mode 100644 docs/src/pages/components/radio.md
 create mode 100644 docs/src/pages/components/toggle.md
 create mode 100644 ui/src/components/radio/QasRadio.vue
 create mode 100644 ui/src/components/radio/QasRadio.yml
 create mode 100644 ui/src/components/toggle/QasToggle.vue
 create mode 100644 ui/src/components/toggle/QasToggle.yml

diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
index 03919fa00..3d53a45cf 100644
--- a/docs/src/assets/menu.js
+++ b/docs/src/assets/menu.js
@@ -247,6 +247,10 @@ module.exports = [
         name: 'Profile',
         path: '/components/profile'
       },
+      {
+        name: 'Radio',
+        path: '/components/radio'
+      },
       {
         name: 'Resizer',
         path: '/components/resizer'
@@ -311,6 +315,10 @@ module.exports = [
         name: 'TextTruncate',
         path: '/components/text-truncate'
       },
+      {
+        name: 'Toggle',
+        path: '/components/toggle'
+      },
       {
         name: 'ToggleVisibility',
         path: '/components/toggle-visibility'
diff --git a/docs/src/examples/QasFormGenerator/Boxed.vue b/docs/src/examples/QasFormGenerator/Boxed.vue
new file mode 100644
index 000000000..258925e27
--- /dev/null
+++ b/docs/src/examples/QasFormGenerator/Boxed.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="container spaced">
+    <qas-form-generator v-model="model" :columns="columns" :fields="fields" use-box />
+
+    <div class="q-mt-lg">
+      model: <qas-debugger :inspect="[model]" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: {
+        password: 'b6c707ea6a2c45ef1feb8e4863aa10c5'
+      }
+    }
+  },
+
+  computed: {
+    columns () {
+      return {
+        isActive: { col: 12 }
+      }
+    },
+
+    fields () {
+      return {
+        uuid: {
+          name: 'uuid',
+          type: 'hidden'
+        },
+
+        isActive: {
+          name: 'isActive',
+          label: 'Usuário ativo?',
+          type: 'boolean',
+          default: false
+        },
+
+        company: {
+          name: 'company',
+          label: 'Empresa',
+          type: 'select',
+          options: [
+            {
+              label: 'Empresa 1',
+              value: 'empresa-1'
+            },
+            {
+              label: 'Empresa 2',
+              value: 'empresa-2'
+            },
+            {
+              label: 'Empresa 3',
+              value: 'empresa-3'
+            }
+          ]
+        },
+
+        name: {
+          name: 'name',
+          label: 'Nome',
+          type: 'string'
+        },
+
+        email: {
+          name: 'email',
+          label: 'Email',
+          type: 'email'
+        },
+
+        password: {
+          name: 'password',
+          label: 'Senha',
+          type: 'password'
+        },
+
+        document: {
+          name: 'document',
+          label: 'Documento',
+          type: 'string',
+          mask: 'document'
+        },
+
+        phone: {
+          name: 'phone',
+          label: 'Telefone',
+          type: 'string',
+          mask: 'phone'
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QasInput/Textarea.vue b/docs/src/examples/QasInput/Textarea.vue
index 6e53c8c3d..f25588801 100644
--- a/docs/src/examples/QasInput/Textarea.vue
+++ b/docs/src/examples/QasInput/Textarea.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="container q-col-gutter-2xl q-py-lg row">
-    <qas-input v-model="model" class="col-4" label="Meu input" type="textarea" />
-    <qas-input v-model="model2" class="col-4" error error-message="Mensagem de erro" label="Meu input" type="textarea" />
-    <qas-input v-model="model2" class="col-4" error error-message="Mensagem de erro" label="Meu input" />
+    <div class="col-4">
+      <qas-input v-model="model" label="Meu input" type="textarea" />
+    </div>
+
+    <div class="col-4">
+      <qas-input v-model="model2" error error-message="Mensagem de erro" label="Meu input" type="textarea" />
+    </div>
+
+    <div class="col-4">
+      <qas-input v-model="model2" error error-message="Mensagem de erro" label="Meu input" />
+    </div>
   </div>
 </template>
 
diff --git a/docs/src/examples/QasNumericInput/Basic.vue b/docs/src/examples/QasNumericInput/Basic.vue
index edf46478c..52f92eda4 100644
--- a/docs/src/examples/QasNumericInput/Basic.vue
+++ b/docs/src/examples/QasNumericInput/Basic.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container spaced">
     <div>
-      <qas-numeric-input v-model="integer" label="integer" />
+      <qas-numeric-input v-model="integer" icon-right="sym_r_person" label="integer" />
       integer: {{ integer }}
     </div>
     <div class="q-my-lg">
diff --git a/docs/src/examples/QasRadio/Basic.vue b/docs/src/examples/QasRadio/Basic.vue
new file mode 100644
index 000000000..f612073a7
--- /dev/null
+++ b/docs/src/examples/QasRadio/Basic.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="container spaced">
+    <qas-radio v-model="model" label="Opção 1" val="1" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'Basic' })
+
+const model = ref('')
+</script>
diff --git a/docs/src/examples/QasRadio/OptionGroup.vue b/docs/src/examples/QasRadio/OptionGroup.vue
new file mode 100644
index 000000000..784756962
--- /dev/null
+++ b/docs/src/examples/QasRadio/OptionGroup.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container spaced">
+    <qas-radio v-model="model" :options />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'OptionGroup' })
+
+const model = ref('')
+
+const options = [
+  {
+    label: 'Opção 1',
+    value: '1'
+  },
+  {
+    label: 'Opção 2',
+    value: '2'
+  },
+  {
+    label: 'Opção 3',
+    value: '3'
+  }
+]
+</script>
diff --git a/docs/src/examples/QasSelect/Basic.vue b/docs/src/examples/QasSelect/Basic.vue
index c4ff9b7cd..0822bbc38 100644
--- a/docs/src/examples/QasSelect/Basic.vue
+++ b/docs/src/examples/QasSelect/Basic.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container q-col-gutter-sm q-py-lg row">
     <div class="col-6">
-      <qas-select v-model="model" error label="Meu select!" :options="options" />
+      <qas-select v-model="model" label="Meu select!" :options="options" />
       <!-- Model: {{ model }} -->
     </div>
 
@@ -86,6 +86,12 @@ export default {
         }
       ]
     }
+  },
+
+  created () {
+    setTimeout(() => {
+      this.model = 1
+    }, 2000)
   }
 }
 </script>
diff --git a/docs/src/examples/QasToggle/Basic.vue b/docs/src/examples/QasToggle/Basic.vue
new file mode 100644
index 000000000..f943059b5
--- /dev/null
+++ b/docs/src/examples/QasToggle/Basic.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="container spaced">
+    <qas-toggle v-model="model" />
+
+    <div>{{ model }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'Basic' })
+
+const model = ref(false)
+</script>
diff --git a/docs/src/pages/components/form-generator.md b/docs/src/pages/components/form-generator.md
index 7a185d795..e6f5acab3 100644
--- a/docs/src/pages/components/form-generator.md
+++ b/docs/src/pages/components/form-generator.md
@@ -16,6 +16,7 @@ Para saber mais sobre o **API Design Pattern** clice [aqui](https://www.notion.s
 
 ## Uso
 <doc-example file="QasFormGenerator/Basic" title="Básico" />
+<doc-example file="QasFormGenerator/Boxed" title="Com box" />
 
 :::tip
 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.
diff --git a/docs/src/pages/components/radio.md b/docs/src/pages/components/radio.md
new file mode 100644
index 000000000..a07569eec
--- /dev/null
+++ b/docs/src/pages/components/radio.md
@@ -0,0 +1,15 @@
+---
+title: QasRadio
+---
+
+Componente wrapper do QRadio/OptionGroup.
+
+:::info
+- Repassa todas propriedades/eventos do QRadio/OptionGroup menos `dense`.
+- quando passado a prop `options` renderiza `OptionGroup`, senão `QRadio`.
+:::
+
+## Uso
+
+<doc-example file="QasRadio/Basic" title="Básico" />
+<doc-example file="QasRadio/OptionGroup" title="Com opções" />
diff --git a/docs/src/pages/components/toggle.md b/docs/src/pages/components/toggle.md
new file mode 100644
index 000000000..c115d84d5
--- /dev/null
+++ b/docs/src/pages/components/toggle.md
@@ -0,0 +1,13 @@
+---
+title: QasToggle
+---
+
+Componente wrapper do QToggle.
+
+:::info
+Repassa todas propriedades/eventos do QToggle menos `dense`.
+:::
+
+## Uso
+
+<doc-example file="QasToggle/Basic" title="Básico" />
diff --git a/ui/src/components/box/QasBox.vue b/ui/src/components/box/QasBox.vue
index 0b4a32b00..22b68f433 100644
--- a/ui/src/components/box/QasBox.vue
+++ b/ui/src/components/box/QasBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white q-pa-md rounded-borders" :class="boxClasses">
+  <div class="bg-white rounded-borders" :class="boxClasses">
     <slot />
   </div>
 </template>
@@ -16,13 +16,19 @@ const props = defineProps({
 
   unelevated: {
     type: Boolean
+  },
+
+  useSpacing: {
+    type: Boolean,
+    default: true
   }
 })
 
 const boxClasses = computed(() => {
   return {
     'border-grey': props.outlined,
-    'shadow-2': !props.unelevated
+    'shadow-2': !props.unelevated,
+    'q-pa-md': props.useSpacing
   }
 })
 </script>
diff --git a/ui/src/components/checkbox-group/QasCheckboxGroup.vue b/ui/src/components/checkbox-group/QasCheckboxGroup.vue
index 5bb683229..39ccc1b08 100644
--- a/ui/src/components/checkbox-group/QasCheckboxGroup.vue
+++ b/ui/src/components/checkbox-group/QasCheckboxGroup.vue
@@ -1,11 +1,11 @@
 <template>
   <div :class="classes">
     <div v-for="(option, index) in props.options" :key="index">
-      <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
+      <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-option-group v-if="hasChildren(option)" class="q-ml-sm" :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+      <q-option-group v-if="hasChildren(option)" class="q-ml-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
 
-      <q-option-group v-else v-model="model" v-bind="attrs" :options="[option]" type="checkbox" />
+      <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
     </div>
   </div>
 </template>
diff --git a/ui/src/components/date-time-input/QasDateTimeInput.vue b/ui/src/components/date-time-input/QasDateTimeInput.vue
index b9a04f85a..85bd1bedf 100644
--- a/ui/src/components/date-time-input/QasDateTimeInput.vue
+++ b/ui/src/components/date-time-input/QasDateTimeInput.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { date as dateFn } from '../../helpers/filters'
+import { date as dateFn, getPlaceholder } from '../../helpers'
 
 import { date } from 'quasar'
 import { ref, watch, computed, useAttrs, onMounted } from 'vue'
@@ -105,14 +105,24 @@ const maskDate = computed(() => {
 
 const mask = computed(() => maskDate.value.replace(/\w/g, '#'))
 
+const maskType = computed(() => {
+  const types = {
+    [props.useDateOnly]: 'date',
+    [props.useTimeOnly]: 'time'
+  }
+
+  return types.true || 'datetime'
+})
+
 const attributes = computed(() => {
-  const { modelValue, ...restAttributes } = attrs
+  const { modelValue, placeholder, ...restAttributes } = attrs
 
   return {
     error: error.value,
     errorMessage: errorMessage.value,
     ...restAttributes,
-    mask: mask.value
+    mask: mask.value,
+    placeholder: placeholder || getPlaceholder(maskType.value)
   }
 })
 
diff --git a/ui/src/components/field/QasField.vue b/ui/src/components/field/QasField.vue
index 698f30801..6f3ecc8d0 100644
--- a/ui/src/components/field/QasField.vue
+++ b/ui/src/components/field/QasField.vue
@@ -15,6 +15,8 @@ import QasOptionGroup from '../option-group/QasOptionGroup.vue'
 import QasPasswordInput from '../password-input/QasPasswordInput.vue'
 import QasSignatureUploader from '../signature-uploader/QasSignatureUploader.vue'
 import QasUploader from '../uploader/QasUploader.vue'
+import QasToggle from '../toggle/QasToggle.vue'
+import QasRadio from '../radio/QasRadio.vue'
 
 const attributesProfile = {
   maxLength: 'maxlength',
@@ -141,9 +143,9 @@ export default {
         datetime: { ...datetimeInput },
         time: { ...datetimeInput, useTimeOnly: true },
 
-        boolean: { is: 'q-toggle', label, ...error },
+        boolean: { is: QasToggle, label, ...error },
         checkbox: { is: 'qas-checkbox-group', label, options, ...error },
-        radio: { is: 'qas-option-group', label, options },
+        radio: { is: QasRadio, label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },
         editor: { is: 'q-editor', toolbar, ...error },
diff --git a/ui/src/components/filters/private/PvFiltersButton.vue b/ui/src/components/filters/private/PvFiltersButton.vue
index 2fd8ff486..ea413ac0a 100644
--- a/ui/src/components/filters/private/PvFiltersButton.vue
+++ b/ui/src/components/filters/private/PvFiltersButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <qas-btn :color="color" data-cy="filters-btn" icon="sym_r_tune" variant="tertiary">
+  <qas-btn data-cy="filters-btn" icon="sym_r_filter_alt" label="Filtrar" variant="tertiary">
     <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" self="top right" v-bind="menuProps">
       <div v-if="loading" class="q-pa-xl text-center">
         <q-spinner color="grey" size="2em" />
diff --git a/ui/src/components/form-generator/QasFormGenerator.vue b/ui/src/components/form-generator/QasFormGenerator.vue
index fce25c0c7..6a684ca01 100644
--- a/ui/src/components/form-generator/QasFormGenerator.vue
+++ b/ui/src/components/form-generator/QasFormGenerator.vue
@@ -1,26 +1,28 @@
 <template>
   <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" :margin="getLabelMargin(fieldsetItem)" />
-        <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
-      </slot>
-
-      <div>
-        <div :class="classes">
-          <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
+      <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>
+
+        <div>
+          <div :class="classes">
+            <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
+              <slot :field="field" :name="`field-${field.name}`">
+                <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+              </slot>
+            </div>
+          </div>
+
+          <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
             <slot :field="field" :name="`field-${field.name}`">
-              <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+              <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
             </slot>
           </div>
         </div>
-
-        <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
-          <slot :field="field" :name="`field-${field.name}`">
-            <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
-          </slot>
-        </div>
-      </div>
+      </component>
     </div>
   </div>
 </template>
@@ -36,6 +38,11 @@ defineOptions({ name: 'QasFormGenerator' })
 const props = defineProps({
   ...baseProps,
 
+  boxProps: {
+    default: () => ({}),
+    type: Object
+  },
+
   disable: {
     type: Boolean
   },
@@ -70,6 +77,10 @@ const props = defineProps({
   order: {
     default: () => [],
     type: Array
+  },
+
+  useBox: {
+    type: Boolean
   }
 })
 
@@ -81,6 +92,15 @@ const { classes, getFieldClass } = useGenerator({ props })
 const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
 // computed
+const containerComponent = computed(() => {
+  return {
+    is: props.useBox ? 'qas-box' : 'div',
+    props: {
+      ...(props.useBox && { ...props.boxProps })
+    }
+  }
+})
+
 const groupedFields = computed(() => {
   const fields = { hidden: {}, visible: {} }
 
@@ -150,6 +170,10 @@ function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
 
+function getLabelMargin (fieldsetItem) {
+  return fieldsetItem.description ? 'sm' : 'md'
+}
+
 function isFieldDisabled ({ disable }) {
   return disable || props.disable
 }
@@ -180,8 +204,4 @@ function useFieldset ({ props }) {
     hasFieldset
   }
 }
-
-function getLabelMargin (fieldsetItem) {
-  return fieldsetItem.description ? 'sm' : 'md'
-}
 </script>
diff --git a/ui/src/components/form-generator/QasFormGenerator.yml b/ui/src/components/form-generator/QasFormGenerator.yml
index 183b76ebc..3b74d032c 100644
--- a/ui/src/components/form-generator/QasFormGenerator.yml
+++ b/ui/src/components/form-generator/QasFormGenerator.yml
@@ -67,6 +67,11 @@ props:
     default: []
     type: Array
 
+  use-box:
+    desc: Contra QasBox dentro do form-generator e fieldset.
+    default: false
+    type: Boolean
+
 slots:
   'field-[nome-da-chave]':
     desc: Acessa o slot de um campo especifico.
diff --git a/ui/src/components/input/QasInput.vue b/ui/src/components/input/QasInput.vue
index 4ee48acb2..a6b952cd0 100644
--- a/ui/src/components/input/QasInput.vue
+++ b/ui/src/components/input/QasInput.vue
@@ -1,9 +1,5 @@
 <template>
-  <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :class="classes" :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
-    <template v-for="(_, name) in $slots" #[name]="context">
-      <slot :name="name" v-bind="context || {}" />
-    </template>
-
+  <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :class="classes" :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" no-error-icon :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
     <template v-if="icon" #append>
       <q-icon :name="icon" size="xs" />
     </template>
@@ -11,6 +7,10 @@
     <template v-if="iconRight" #prepend>
       <q-icon :name="iconRight" size="xs" />
     </template>
+
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
   </q-input>
 </template>
 
@@ -164,10 +164,6 @@ export default {
 
     hasPrepend () {
       return !!this.$slots.prepend || this.iconRight
-    },
-
-    hasAppend () {
-      return !!this.$slots.append || this.icon
     }
   },
 
diff --git a/ui/src/components/numeric-input/QasNumericInput.vue b/ui/src/components/numeric-input/QasNumericInput.vue
index e70304f47..efc36a9c8 100644
--- a/ui/src/components/numeric-input/QasNumericInput.vue
+++ b/ui/src/components/numeric-input/QasNumericInput.vue
@@ -1,14 +1,22 @@
 <template>
-  <q-field :label="formattedLabel" :model-value="modelValue" outlined>
+  <q-field class="qas-numeric-input" :class="classes" dense :label="formattedLabel" :model-value="modelValue">
     <template #control="{ floatingLabel, id, editable }">
-      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :disabled="!editable" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :disabled="!editable" inputmode="numeric" :placeholder @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+    </template>
+
+    <template v-if="icon" #append>
+      <q-icon :name="icon" size="xs" />
+    </template>
+
+    <template v-if="iconRight" #prepend>
+      <q-icon :name="iconRight" size="xs" />
     </template>
   </q-field>
 </template>
 
 <script>
 import AutoNumeric from 'autonumeric'
-import { getRequiredLabel } from '../../helpers'
+import { getRequiredLabel, getPlaceholder } from '../../helpers'
 
 const defaultModes = {
   decimal: 'commaDecimalCharDotSeparator',
@@ -71,6 +79,16 @@ export default {
     usePositive: {
       default: true,
       type: Boolean
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    },
+
+    iconRight: {
+      type: String,
+      default: ''
     }
   },
 
@@ -92,6 +110,23 @@ export default {
 
     formattedLabel () {
       return getRequiredLabel({ label: this.label, required: this.required })
+    },
+
+    // redesign
+    classes () {
+      return {
+        'qas-numeric-input--has-icon': this.hasPrepend
+      }
+    },
+
+    hasPrepend () {
+      return !!this.$slots.prepend || this.iconRight
+    },
+
+    placeholder () {
+      const { placeholder } = this.$attrs
+
+      return placeholder || getPlaceholder(this.mode)
     }
   },
 
diff --git a/ui/src/components/radio/QasRadio.vue b/ui/src/components/radio/QasRadio.vue
new file mode 100644
index 000000000..83f312b46
--- /dev/null
+++ b/ui/src/components/radio/QasRadio.vue
@@ -0,0 +1,55 @@
+<template>
+  <component :is="component.is" v-bind="component.props" />
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasRadio',
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
+// const isOptionGroup = computed(() => !!attrs.options?.length)
+
+// const attributes = computed(() => {
+//   const {
+//     inline = false,
+//     dense = true
+//   } = attrs
+
+//   return {
+//     ...attrs,
+//     inline: isOptionGroup.value ? inline : undefined,
+//     dense
+//   }
+// })
+
+// const component = computed(() => attrs.options?.length ? 'q-option-group' : 'q-radio')
+
+const component = computed(() => {
+  const isOptionGroup = !!attrs.options?.length
+
+  const { inline = true, ...payloadProps } = attrs
+
+  return {
+    is: isOptionGroup ? 'q-option-group' : 'q-radio',
+    props: {
+      ...payloadProps,
+
+      ...(isOptionGroup && {
+        inline,
+        class: {
+          'q-gutter-x-md': inline,
+          'q-gutter-y-md': !inline
+        }
+      }),
+
+      dense: true
+    }
+  }
+})
+console.log('TCL: component -> component', component)
+</script>
diff --git a/ui/src/components/radio/QasRadio.yml b/ui/src/components/radio/QasRadio.yml
new file mode 100644
index 000000000..0bfe5ce91
--- /dev/null
+++ b/ui/src/components/radio/QasRadio.yml
@@ -0,0 +1,5 @@
+type: component
+
+meta:
+  desc: Componente wrapper do QRadio.
+
diff --git a/ui/src/components/search-input/QasSearchInput.vue b/ui/src/components/search-input/QasSearchInput.vue
index 180061ee2..cb8299e92 100644
--- a/ui/src/components/search-input/QasSearchInput.vue
+++ b/ui/src/components/search-input/QasSearchInput.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <qas-input ref="input" v-model="model" v-bind="$attrs" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
+  <qas-box class="qas-search-input" :use-spacing="false">
+    <qas-input ref="input" v-model="model" class="qas-search-input__input" v-bind="$attrs" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" outlined type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
 
@@ -13,7 +13,7 @@
         <slot name="after-clear" />
       </template>
     </qas-input>
-  </div>
+  </qas-box>
 </template>
 
 <script>
@@ -77,3 +77,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-search-input {
+  .qas-search-input__input .q-field__control:before {
+    border: 0;
+  }
+}
+</style>
diff --git a/ui/src/components/select/QasSelect.vue b/ui/src/components/select/QasSelect.vue
index 37b548ee5..e4902eab4 100644
--- a/ui/src/components/select/QasSelect.vue
+++ b/ui/src/components/select/QasSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" class="qas-select" :outlined="false">
+  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClass" no-error-icon :outlined="false">
     <template v-if="isSearchable" #prepend>
       <q-icon name="sym_r_search" />
     </template>
@@ -24,15 +24,15 @@
 
     <template v-if="attributes.useChips" #selected-item="{ opt, tabindex, index, removeAtIndex }">
       <q-chip
-        class="q-px-sm q-py-xs"
-        color="light-blue-2"
+        class="q-px-sm q-py-xs text-bold"
+        color="black"
         dense
         :disable="isDisabled"
         icon-remove="sym_r_close"
         removable
         square
-        :tabindex="tabindex"
-        text-color="grey-9"
+        :tabindex
+        text-color="white"
         @remove="removeAtIndex(index)"
       >
         <div class="ellipsis" :title="opt.label">
@@ -116,7 +116,6 @@ export default {
   computed: {
     attributes () {
       return {
-        class: this.componentClass,
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
@@ -207,6 +206,7 @@ export default {
 
     // redesign
     componentClass () {
+      console.log('TCL: componentClass -> this.isSearchable || this.hasAppend', this.isSearchable || this.hasAppend)
       return {
         'qas-select--has-icon': this.isSearchable || this.hasAppend,
         'qas-select--closed': !this.isPopupContentOpen,
@@ -377,7 +377,7 @@ export default {
   }
 
   .q-chip__icon--remove {
-    color: $grey-9;
+    // color: $grey-9;
     opacity: 1;
   }
 }
diff --git a/ui/src/components/table-generator/QasTableGenerator.vue b/ui/src/components/table-generator/QasTableGenerator.vue
index 764ca60d6..02de53e40 100644
--- a/ui/src/components/table-generator/QasTableGenerator.vue
+++ b/ui/src/components/table-generator/QasTableGenerator.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="parentComponent.is" v-bind="parentComponent.props">
+  <component :is="parentComponent.is">
     <q-table ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="name" v-bind="context" />
@@ -226,10 +226,7 @@ export default {
 
     parentComponent () {
       return {
-        is: this.useBox ? 'qas-box' : 'div',
-        props: {
-          class: this.useBox ? 'q-px-lg q-py-md' : ''
-        }
+        is: this.useBox ? 'qas-box' : 'div'
       }
     }
   },
diff --git a/ui/src/components/toggle/QasToggle.vue b/ui/src/components/toggle/QasToggle.vue
new file mode 100644
index 000000000..d690d90ec
--- /dev/null
+++ b/ui/src/components/toggle/QasToggle.vue
@@ -0,0 +1,14 @@
+<template>
+  <q-toggle v-bind="attrs" dense />
+</template>
+
+<script setup>
+import { useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasToggle',
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+</script>
diff --git a/ui/src/components/toggle/QasToggle.yml b/ui/src/components/toggle/QasToggle.yml
new file mode 100644
index 000000000..4a3af0142
--- /dev/null
+++ b/ui/src/components/toggle/QasToggle.yml
@@ -0,0 +1,5 @@
+type: component
+
+meta:
+  desc: Componente wrapper do QToggle.
+
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index 4703287c4..c7cdb3038 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -63,6 +63,8 @@
     transition: transform 0.3s, font-size 0.3s;
   }
 
+  &--float.qas-numeric-input--has-icon,
+  &--focused.qas-numeric-input--has-icon,
   &--float.qas-select--has-icon,
   &--focused.qas-select--has-icon,
   &--float.qas-input--has-icon,
diff --git a/ui/src/css/components/radio.scss b/ui/src/css/components/radio.scss
index c19fabd8b..1a93dbd5d 100644
--- a/ui/src/css/components/radio.scss
+++ b/ui/src/css/components/radio.scss
@@ -1,12 +1,16 @@
 .q-radio {
   &__label {
-    @include set-typography($body1);
+    @include set-typography($body2);
   }
 
   &__inner::before {
     color: $primary;
   }
 
+  &.q-radio--dense .q-radio__label {
+    padding-left: var(--qas-spacing-sm);
+  }
+
   &.disabled {
     .q-radio__label,
     .q-radio__inner {
diff --git a/ui/src/css/components/toggle.scss b/ui/src/css/components/toggle.scss
index 6243900e0..a24ce61ce 100644
--- a/ui/src/css/components/toggle.scss
+++ b/ui/src/css/components/toggle.scss
@@ -1,8 +1,24 @@
 .q-toggle {
   &__label {
-    @include set-typography($body1);
+    @include set-typography($body2);
   }
 
+  // .q-toggle__inner {
+  //   width: 0.8em !important;
+  //   min-width: 0.8em !important;
+  //   height: 0.5em !important;
+  //   padding: 0.07625em 0 !important;
+  // }
+
+  // .q-toggle__label {
+  //   padding-left: 0.5em !important;
+  // }
+
+  // .q-toggle__thumb {
+  //   top: 0;
+  //   left: 0;
+  // }
+
   &.disabled {
     .q-toggle__label {
       color: $grey-6;
diff --git a/ui/src/vue-plugin.js b/ui/src/vue-plugin.js
index 9381a417f..fffccd4ab 100644
--- a/ui/src/vue-plugin.js
+++ b/ui/src/vue-plugin.js
@@ -48,6 +48,7 @@ import QasPasswordInput from './components/password-input/QasPasswordInput.vue'
 import QasPasswordStrengthChecker from './components/password-strength-checker/QasPasswordStrengthChecker.vue'
 import QasProfile from './components/profile/QasProfile.vue'
 import QasResizer from './components/resizer/QasResizer.vue'
+import QasRadio from './components/radio/QasRadio.vue'
 import QasSearchBox from './components/search-box/QasSearchBox.vue'
 import QasSearchInput from './components/search-input/QasSearchInput.vue'
 import QasSelect from './components/select/QasSelect.vue'
@@ -64,6 +65,7 @@ import QasTableGenerator from './components/table-generator/QasTableGenerator.vu
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
 import QasTimeline from './components/timeline/QasTimeline.vue'
+import QasToggle from './components/toggle/QasToggle.vue'
 import QasToggleVisibility from './components/toggle-visibility/QasToggleVisibility.vue'
 import QasTransfer from './components/transfer/QasTransfer.vue'
 import QasTreeGenerator from './components/tree-generator/QasTreeGenerator.vue'
@@ -142,6 +144,7 @@ async function install (app) {
   app.component('QasPasswordStrengthChecker', QasPasswordStrengthChecker)
   app.component('QasProfile', QasProfile)
   app.component('QasResizer', QasResizer)
+  app.component('QasRadio', QasRadio)
   app.component('QasSearchBox', QasSearchBox)
   app.component('QasSearchInput', QasSearchInput)
   app.component('QasSelect', QasSelect)
@@ -158,6 +161,7 @@ async function install (app) {
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
   app.component('QasTimeline', QasTimeline)
+  app.component('QasToggle', QasToggle)
   app.component('QasToggleVisibility', QasToggleVisibility)
   app.component('QasTransfer', QasTransfer)
   app.component('QasTreeGenerator', QasTreeGenerator)
@@ -238,6 +242,7 @@ export {
   QasPasswordStrengthChecker,
   QasProfile,
   QasResizer,
+  QasRadio,
   QasSearchBox,
   QasSearchInput,
   QasSelect,
@@ -254,6 +259,7 @@ export {
   QasTabsGenerator,
   QasTextTruncate,
   QasTimeline,
+  QasToggle,
   QasToggleVisibility,
   QasTransfer,
   QasTreeGenerator,

From 87018a001d8a52ca01f806c1fe1d897b29ffcda0 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Mon, 5 Aug 2024 18:55:50 -0300
Subject: [PATCH 08/22] chore: Update checkbox and radio label padding

---
 CHANGELOG.md                                  |   6 +-
 docs/src/examples/QasCheckboxGroup/Basic.vue  |  66 -----------
 .../examples/QasCheckboxGroup/Children.vue    |  34 ++++++
 .../src/examples/QasCheckboxGroup/Options.vue |  32 ++++++
 docs/src/examples/QasCheckboxGroup/Single.vue |  17 +++
 .../examples/QasFormGenerator/Fieldset.vue    |   7 +-
 docs/src/examples/QasToggle/Basic.vue         |   6 +-
 docs/src/pages/components/checkbox-group.md   |   4 +-
 docs/src/pages/components/form-generator.md   |  10 +-
 .../checkbox-group/QasCheckboxGroup.vue       |  46 ++++++--
 ui/src/components/filters/QasFilters.vue      |   2 +-
 .../nested-fields/QasNestedFields.vue         | 106 ++++++++++--------
 ui/src/components/radio/QasRadio.vue          |  24 +---
 ui/src/css/components/checkbox.scss           |   2 +
 ui/src/css/components/radio.scss              |   6 +-
 ui/src/css/components/toggle.scss             |  18 +--
 16 files changed, 208 insertions(+), 178 deletions(-)
 delete mode 100644 docs/src/examples/QasCheckboxGroup/Basic.vue
 create mode 100644 docs/src/examples/QasCheckboxGroup/Children.vue
 create mode 100644 docs/src/examples/QasCheckboxGroup/Options.vue
 create mode 100644 docs/src/examples/QasCheckboxGroup/Single.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f87482d5f..60849fa8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,10 @@ 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
+## BREAKING CHANGES
+- `QasInput`: adicionado contado no type`textarea`, então caso exista lugares com contadores de caracteres, é necessário remover para não duplicar.
+
 ## [3.16.0-beta.10] - 01-08-2024
 ## BREAKING CHANGES
 - `QasSingleView`: Possível breaking change ao utilizar o `before-fetch`.
@@ -2996,4 +3000,4 @@ Adicionado suporte para Pinia/Vuex Seguindo os padrões da biblioteca `@bildvitt
 [3.16.0-beta.7]: https://github.com/bildvitta/asteroid/compare/v3.16.0-beta.6...v3.16.0-beta.7?expand=1
 [3.16.0-beta.8]: https://github.com/bildvitta/asteroid/compare/v3.16.0-beta.7...v3.16.0-beta.8?expand=1
 [3.16.0-beta.9]: https://github.com/bildvitta/asteroid/compare/v3.16.0-beta.8...v3.16.0-beta.9?expand=1
-[3.16.0-beta.10]: https://github.com/bildvitta/asteroid/compare/v3.16.0-beta.9...v3.16.0-beta.10?expand=1
\ No newline at end of file
+[3.16.0-beta.10]: https://github.com/bildvitta/asteroid/compare/v3.16.0-beta.9...v3.16.0-beta.10?expand=1
diff --git a/docs/src/examples/QasCheckboxGroup/Basic.vue b/docs/src/examples/QasCheckboxGroup/Basic.vue
deleted file mode 100644
index de2da2555..000000000
--- a/docs/src/examples/QasCheckboxGroup/Basic.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="container spaced">
-    <div>Com children: </div>
-    <qas-checkbox-group v-model="model" :options="childrenOptions" />
-
-    <div class="q-my-lg">
-      model: <qas-debugger :inspect="[model]" />
-    </div>
-
-    <div>Sem children: </div>
-    <qas-checkbox-group v-model="model2" :options="options" />
-
-    <div class="q-my-lg">
-      model2: <qas-debugger :inspect="[model2]" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      model: [],
-      model2: []
-    }
-  },
-
-  computed: {
-    childrenOptions () {
-      return [
-        {
-          label: 'Opção 1',
-          value: 1,
-          children: [
-            {
-              label: 'Opção 2',
-              value: 2
-            },
-            {
-              label: 'Opção 3',
-              value: 3
-            }
-          ]
-        }
-      ]
-    },
-
-    options () {
-      return [
-        {
-          label: 'Opção 1',
-          value: 1
-        },
-        {
-          label: 'Opção 2',
-          value: 2
-        },
-        {
-          label: 'Opção 3',
-          value: 3
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/docs/src/examples/QasCheckboxGroup/Children.vue b/docs/src/examples/QasCheckboxGroup/Children.vue
new file mode 100644
index 000000000..f951d0020
--- /dev/null
+++ b/docs/src/examples/QasCheckboxGroup/Children.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="container spaced">
+    <qas-checkbox-group v-model="model" label="Aceitar" :options="optionsChildren" />
+
+    <div class="q-mt-lg">
+      model: {{ model }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'Children' })
+
+const model = ref([])
+
+const optionsChildren = [
+  {
+    label: 'Opção 1',
+    value: 1,
+    children: [
+      {
+        label: 'Opção 2',
+        value: 2
+      },
+      {
+        label: 'Opção 3',
+        value: 3
+      }
+    ]
+  }
+]
+</script>
diff --git a/docs/src/examples/QasCheckboxGroup/Options.vue b/docs/src/examples/QasCheckboxGroup/Options.vue
new file mode 100644
index 000000000..09f531af1
--- /dev/null
+++ b/docs/src/examples/QasCheckboxGroup/Options.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="container spaced">
+    <qas-checkbox-group v-model="model" :options />
+
+    <div class="q-mt-lg">
+      model: {{ model }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'Options' })
+
+const model = ref([])
+
+const options = [
+  {
+    label: 'Opção 1',
+    value: 1
+  },
+  {
+    label: 'Opção 2',
+    value: 2
+  },
+  {
+    label: 'Opção 3',
+    value: 3
+  }
+]
+</script>
diff --git a/docs/src/examples/QasCheckboxGroup/Single.vue b/docs/src/examples/QasCheckboxGroup/Single.vue
new file mode 100644
index 000000000..0af09b620
--- /dev/null
+++ b/docs/src/examples/QasCheckboxGroup/Single.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="container spaced">
+    <qas-checkbox-group v-model="model" :false-value="false" label="Aceitar" :true-value="true" />
+
+    <div class="q-mt-lg">
+      model: {{ model }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'Single' })
+
+const model = ref(false)
+</script>
diff --git a/docs/src/examples/QasFormGenerator/Fieldset.vue b/docs/src/examples/QasFormGenerator/Fieldset.vue
index 0e87d8e78..349f88135 100644
--- a/docs/src/examples/QasFormGenerator/Fieldset.vue
+++ b/docs/src/examples/QasFormGenerator/Fieldset.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-form-generator v-model="model" :columns="columns" :fields="fields" :fields-props="fieldsProps" :fieldset="fieldset">
-      <template #legend-another>
-        Custom slot "another"
-      </template>
-    </qas-form-generator>
+    <qas-form-generator v-model="model" :columns="columns" :fields="fields" :fields-props="fieldsProps" :fieldset="fieldset" />
 
     <div class="q-mt-lg">
       model: <qas-debugger :inspect="[model]" />
@@ -47,6 +43,7 @@ export default {
 
         another: {
           label: 'Outras informações',
+          description: 'Informe a empresa, telefone e documento do usuário.',
           fields: ['phone', 'company']
         }
       }
diff --git a/docs/src/examples/QasToggle/Basic.vue b/docs/src/examples/QasToggle/Basic.vue
index f943059b5..873637bb6 100644
--- a/docs/src/examples/QasToggle/Basic.vue
+++ b/docs/src/examples/QasToggle/Basic.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="container spaced">
-    <qas-toggle v-model="model" />
+    <qas-toggle v-model="model" label="Ativar" />
 
-    <div>{{ model }}</div>
+    <div class="q-mt-lg">
+      model: {{ model }}
+    </div>
   </div>
 </template>
 
diff --git a/docs/src/pages/components/checkbox-group.md b/docs/src/pages/components/checkbox-group.md
index 8bc311056..9ab931bd8 100644
--- a/docs/src/pages/components/checkbox-group.md
+++ b/docs/src/pages/components/checkbox-group.md
@@ -8,4 +8,6 @@ Componente para gerar dinamicamente checkbox agrupados.
 
 ## Uso
 
-<doc-example file="QasCheckboxGroup/Basic" title="Básico" />
+<doc-example file="QasCheckboxGroup/Single" title="Single" />
+<doc-example file="QasCheckboxGroup/Options" title="Options" />
+<doc-example file="QasCheckboxGroup/Children" title="Children options" />
diff --git a/docs/src/pages/components/form-generator.md b/docs/src/pages/components/form-generator.md
index e6f5acab3..09a7fe059 100644
--- a/docs/src/pages/components/form-generator.md
+++ b/docs/src/pages/components/form-generator.md
@@ -15,8 +15,8 @@ Para saber mais sobre o **API Design Pattern** clice [aqui](https://www.notion.s
 :::
 
 ## Uso
-<doc-example file="QasFormGenerator/Basic" title="Básico" />
-<doc-example file="QasFormGenerator/Boxed" title="Com box" />
+<!-- <doc-example file="QasFormGenerator/Basic" title="Básico" />
+<doc-example file="QasFormGenerator/Boxed" title="Com box" /> -->
 
 :::tip
 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.
@@ -41,8 +41,8 @@ Muitas vezes precisamos adicionar rótulos (label) e descrições (description)
 <doc-example file="QasFormGenerator/Fieldset" title="Agrupando fields por rótulo (label)" />
 
 Em alguns casos, queremos acessar todo o conteúdo de um campo especifico para fazer uma logica um pouco mais detalhada, neste caso conseguimos acessar o slot de cada campo individualmente.
-<doc-example file="QasFormGenerator/CustomSlot" title="Acessando slots" />
+<!-- <doc-example file="QasFormGenerator/CustomSlot" title="Acessando slots" /> -->
 
-<doc-example file="QasFormGenerator/CustomProps" title="Custom props" />
+<!-- <doc-example file="QasFormGenerator/CustomProps" title="Custom props" /> -->
 
-<doc-example file="QasFormGenerator/ExFormCommonColumns" title="Common columns" />
+<!-- <doc-example file="QasFormGenerator/ExFormCommonColumns" title="Common columns" /> -->
diff --git a/ui/src/components/checkbox-group/QasCheckboxGroup.vue b/ui/src/components/checkbox-group/QasCheckboxGroup.vue
index 39ccc1b08..ea35d39ab 100644
--- a/ui/src/components/checkbox-group/QasCheckboxGroup.vue
+++ b/ui/src/components/checkbox-group/QasCheckboxGroup.vue
@@ -1,11 +1,22 @@
 <template>
-  <div :class="classes">
-    <div v-for="(option, index) in props.options" :key="index">
-      <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-option-group v-if="hasChildren(option)" class="q-ml-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
-
-      <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+  <div>
+    <!-- Single -->
+    <q-checkbox v-if="isSingle" v-model="model" v-bind="attrs" dense>
+      <slot />
+    </q-checkbox>
+
+    <!-- Group -->
+    <div v-else :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)" />
+
+        <!-- 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)" />
+
+        <!-- Sem children -->
+        <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+      </div>
     </div>
   </div>
 </template>
@@ -13,7 +24,10 @@
 <script setup>
 import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
-defineOptions({ name: 'QasCheckboxGroup' })
+defineOptions({
+  name: 'QasCheckboxGroup',
+  inheritAttrs: false
+})
 
 const props = defineProps({
   options: {
@@ -23,7 +37,7 @@ const props = defineProps({
 
   modelValue: {
     default: () => [],
-    type: Array
+    type: [Array, String, Number, Boolean, Object]
   },
 
   inline: {
@@ -36,10 +50,13 @@ const emit = defineEmits(['update:modelValue'])
 
 const attrs = useAttrs()
 
-onMounted(handleParent)
-
+// refs
 const group = ref({})
 
+// lifecycle
+onMounted(handleParent)
+
+// computed
 const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
 const model = computed({
@@ -52,12 +69,18 @@ const model = computed({
   }
 })
 
+const isSingle = computed(() => !props.options.length)
+
+// watch
 watch(() => props.options, handleParent)
 
 // functions
 function handleParent () {
+  if (isSingle.value) return
+
   for (const index in props.options) {
     const option = props.options[index]
+
     if (hasChildren(option)) {
       setGroupIntersection(props.modelValue, option, index)
     }
@@ -103,5 +126,4 @@ function getCheckboxClass (option) {
 function getModelValue (index) {
   return group.value[index]
 }
-
 </script>
diff --git a/ui/src/components/filters/QasFilters.vue b/ui/src/components/filters/QasFilters.vue
index 5250cf2a3..fc2be08d5 100644
--- a/ui/src/components/filters/QasFilters.vue
+++ b/ui/src/components/filters/QasFilters.vue
@@ -29,7 +29,7 @@
     <div v-if="hasChip" class="q-mt-md">
       <!-- TODO rever com novo estilo -->
       <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="sym_r_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">
-        {{ getChipValue(filterItem.value) }}
+        <span class="ellipsis" style="max-width: 100px;" :title="filterItem.label">{{ filterItem.label }}</span> : "{{ getChipValue(filterItem.value) }}"
       </q-chip>
     </div>
 
diff --git a/ui/src/components/nested-fields/QasNestedFields.vue b/ui/src/components/nested-fields/QasNestedFields.vue
index cce7f7578..185c9409c 100644
--- a/ui/src/components/nested-fields/QasNestedFields.vue
+++ b/ui/src/components/nested-fields/QasNestedFields.vue
@@ -1,61 +1,64 @@
 <template>
   <div :id="fieldName" class="qas-nested-fields" :data-cy="`nested-fields-${fieldName}`">
-    <div v-if="useSingleLabel" class="text-left">
-      <qas-label :label="fieldLabel" typography="h5" />
-    </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)" />
-            </header>
-
-            <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">
-              <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)">
-                  <template v-for="(slot, key) in $slots" #[key]="scope">
-                    <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
-                  </template>
-                </qas-form-generator>
-              </slot>
-
-              <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                <qas-actions-menu v-bind="getActionsMenuProps(index, row)" />
+    <component :is="boxComponent">
+      <div v-if="useSingleLabel" class="text-left">
+        <qas-label :label="fieldLabel" typography="h5" />
+      </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>
+
+              <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">
+                <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)">
+                    <template v-for="(slot, key) in $slots" #[key]="scope">
+                      <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
+                    </template>
+                  </qas-form-generator>
+                </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" />
+                </div>
               </div>
+
+              <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="after-fields" :update-value="updateValuesFromInput" />
             </div>
+          </template>
+        </component>
 
-            <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="after-fields" :update-value="updateValuesFromInput" />
-          </div>
-        </template>
-      </component>
+        <div v-if="useAdd">
+          <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()" />
+            </div>
 
-      <div v-if="useAdd">
-        <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()" />
-          </div>
+            <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" data-cy="nested-fields-add-btn" @click="add()">
+              <div class="col">
+                <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" @focus="add()" />
+              </div>
 
-          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" data-cy="nested-fields-add-btn" @click="add()">
-            <div class="col">
-              <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" @focus="add()" />
+              <div class="col-auto">
+                <qas-btn color="primary" icon="sym_r_add_circle_outline" variant="tertiary" />
+              </div>
             </div>
 
-            <div class="col-auto">
-              <qas-btn color="primary" icon="sym_r_add_circle_outline" variant="tertiary" />
+            <div v-else class="text-left">
+              <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
             </div>
-          </div>
-
-          <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
-          </div>
-        </slot>
+          </slot>
+        </div>
       </div>
-    </div>
+    </component>
   </div>
 </template>
 
@@ -195,6 +198,11 @@ export default {
       default: true
     },
 
+    useBox: {
+      type: Boolean,
+      default: true
+    },
+
     useDestroyAlways: {
       type: Boolean,
       default: undefined
@@ -252,6 +260,10 @@ export default {
       return this.field?.children
     },
 
+    boxComponent () {
+      return this.useBox ? 'qas-box' : 'div'
+    },
+
     componentTag () {
       return this.useAnimation ? 'transition-group' : 'div'
     },
diff --git a/ui/src/components/radio/QasRadio.vue b/ui/src/components/radio/QasRadio.vue
index 83f312b46..cab0ecfc2 100644
--- a/ui/src/components/radio/QasRadio.vue
+++ b/ui/src/components/radio/QasRadio.vue
@@ -12,23 +12,12 @@ defineOptions({
 
 const attrs = useAttrs()
 
-// const isOptionGroup = computed(() => !!attrs.options?.length)
-
-// const attributes = computed(() => {
-//   const {
-//     inline = false,
-//     dense = true
-//   } = attrs
-
-//   return {
-//     ...attrs,
-//     inline: isOptionGroup.value ? inline : undefined,
-//     dense
-//   }
-// })
-
-// const component = computed(() => attrs.options?.length ? 'q-option-group' : 'q-radio')
-
+/**
+ * - quando é um grupo de opções, o componente é 'QOptionGroup', caso contrário,
+ * é 'QRadio'.
+ * - a propriedade inline só é usada no caso do QOptionGroup.
+ * - todos os casos é usado o dense.
+ */
 const component = computed(() => {
   const isOptionGroup = !!attrs.options?.length
 
@@ -51,5 +40,4 @@ const component = computed(() => {
     }
   }
 })
-console.log('TCL: component -> component', component)
 </script>
diff --git a/ui/src/css/components/checkbox.scss b/ui/src/css/components/checkbox.scss
index 4685ab18e..fee37a1ed 100644
--- a/ui/src/css/components/checkbox.scss
+++ b/ui/src/css/components/checkbox.scss
@@ -1,6 +1,8 @@
 .q-checkbox {
   &__label {
     @include set-typography($body1);
+
+    padding-left: var(--qas-spacing-sm) !important;
   }
 
   &.disabled {
diff --git a/ui/src/css/components/radio.scss b/ui/src/css/components/radio.scss
index 1a93dbd5d..46b8238d8 100644
--- a/ui/src/css/components/radio.scss
+++ b/ui/src/css/components/radio.scss
@@ -1,16 +1,14 @@
 .q-radio {
   &__label {
     @include set-typography($body2);
+
+    padding-left: var(--qas-spacing-sm) !important;
   }
 
   &__inner::before {
     color: $primary;
   }
 
-  &.q-radio--dense .q-radio__label {
-    padding-left: var(--qas-spacing-sm);
-  }
-
   &.disabled {
     .q-radio__label,
     .q-radio__inner {
diff --git a/ui/src/css/components/toggle.scss b/ui/src/css/components/toggle.scss
index a24ce61ce..83cc6fa6b 100644
--- a/ui/src/css/components/toggle.scss
+++ b/ui/src/css/components/toggle.scss
@@ -1,23 +1,9 @@
 .q-toggle {
   &__label {
     @include set-typography($body2);
-  }
-
-  // .q-toggle__inner {
-  //   width: 0.8em !important;
-  //   min-width: 0.8em !important;
-  //   height: 0.5em !important;
-  //   padding: 0.07625em 0 !important;
-  // }
 
-  // .q-toggle__label {
-  //   padding-left: 0.5em !important;
-  // }
-
-  // .q-toggle__thumb {
-  //   top: 0;
-  //   left: 0;
-  // }
+    padding-left: var(--qas-spacing-sm) !important;
+  }
 
   &.disabled {
     .q-toggle__label {

From 68ed5073c0cfab3d13032a1baadd39db6348ea84 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Wed, 7 Aug 2024 09:42:51 -0300
Subject: [PATCH 09/22] WIP: Redesign

---
 CHANGELOG.md                                  | 37 ++++++++++++++
 app-extension/src/boot/chart-view.js          |  4 +-
 docs/src/assets/menu.js                       |  4 +-
 docs/src/examples/QasBadge/Removable.vue      | 27 ++++++++++
 .../Children.vue                              |  2 +-
 .../Options.vue                               |  2 +-
 .../Single.vue                                |  2 +-
 .../examples/QasFormGenerator/Fieldset.vue    |  8 +--
 .../HeaderWithActionsMenu.vue}                |  6 +--
 .../HeaderWithButton.vue}                     |  9 ++--
 .../examples/QasHeader/HeaderWithSlots.vue    | 13 +++++
 .../HeaderActionsWithSlots.vue                | 29 -----------
 .../HeaderActionsWithActionsMenu.vue          |  4 +-
 .../QasPageHeader/HeaderActionsWithButton.vue |  4 +-
 docs/src/examples/QasToggle/Basic.vue         | 12 ++---
 docs/src/pages/components/badge.md            | 12 ++---
 docs/src/pages/components/checkbox-group.md   | 13 -----
 docs/src/pages/components/checkbox.md         | 13 +++++
 docs/src/pages/components/form-generator.md   |  4 +-
 docs/src/pages/components/header-actions.md   | 13 -----
 docs/src/pages/components/header.md           | 13 +++++
 ui/src/components/badge/QasBadge.vue          | 50 ++++++++++++++++++-
 ui/src/components/badge/QasBadge.yml          | 31 +++++++++++-
 ui/src/components/chart-view/QasChartView.vue | 26 +++++-----
 .../QasCheckbox.vue}                          |  2 +-
 .../QasCheckbox.yml}                          |  0
 ui/src/components/field/QasField.vue          |  6 +--
 ui/src/components/filters/QasFilters.vue      | 21 +++++---
 .../form-generator/QasFormGenerator.vue       |  9 ++--
 .../QasHeader.vue}                            | 25 ++++++++--
 .../QasHeader.yml}                            |  2 +-
 .../nested-fields/QasNestedFields.vue         |  3 +-
 .../nested-fields/QasNestedFields.yml         |  5 ++
 .../components/page-header/QasPageHeader.vue  |  8 +--
 .../components/page-header/QasPageHeader.yml  |  4 +-
 ui/src/components/select/QasSelect.vue        | 19 ++++---
 ui/src/composables/private/use-generator.js   | 10 +++-
 ui/src/vue-plugin.js                          | 12 ++---
 38 files changed, 315 insertions(+), 149 deletions(-)
 create mode 100644 docs/src/examples/QasBadge/Removable.vue
 rename docs/src/examples/{QasCheckboxGroup => QasCheckbox}/Children.vue (84%)
 rename docs/src/examples/{QasCheckboxGroup => QasCheckbox}/Options.vue (88%)
 rename docs/src/examples/{QasCheckboxGroup => QasCheckbox}/Single.vue (70%)
 rename docs/src/examples/{QasHeaderActions/HeaderActionsWithActionsMenu.vue => QasHeader/HeaderWithActionsMenu.vue} (68%)
 rename docs/src/examples/{QasHeaderActions/HeaderActionsWithButton.vue => QasHeader/HeaderWithButton.vue} (52%)
 create mode 100644 docs/src/examples/QasHeader/HeaderWithSlots.vue
 delete mode 100644 docs/src/examples/QasHeaderActions/HeaderActionsWithSlots.vue
 delete mode 100644 docs/src/pages/components/checkbox-group.md
 create mode 100644 docs/src/pages/components/checkbox.md
 delete mode 100644 docs/src/pages/components/header-actions.md
 create mode 100644 docs/src/pages/components/header.md
 rename ui/src/components/{checkbox-group/QasCheckboxGroup.vue => checkbox/QasCheckbox.vue} (99%)
 rename ui/src/components/{checkbox-group/QasCheckboxGroup.yml => checkbox/QasCheckbox.yml} (100%)
 rename ui/src/components/{header-actions/QasHeaderActions.vue => header/QasHeader.vue} (74%)
 rename ui/src/components/{header-actions/QasHeaderActions.yml => header/QasHeader.yml} (98%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60849fa8b..550d69d83 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,7 +12,44 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 
 ## Não publicado
 ## BREAKING CHANGES
+- `A fazer`:
+  - Substituir todos `QToggle` por `QasToggle`.
+  - Substituir todos `QRadio` por `QasRadio`.
+  - Substituir todos `QasCheckboxGroup` por `QasCheckbox`.
+  - Substituir todos `QasHeaderActions` por `QasHeader`.
+  - Atentar-se para prop `headerActionsProps` no componente `QasPageHeader`.
+  - Remover TODOS `QChip` de slot do `QasSelect`.
+  - Caso esteja usando `QChip` (fora do QasSelect) substituir o uso pelo `QasBadge` com a prop `removable`.
+  - Atentar-se para possíveis breaking changes nos inputs: `QasToggle`, `QasCheckbox`, e `QasRadio`, validar nos formulários dos produtos.
+
+- `QasHeaderActions`:
+  - renomeado para `QasHeader`.
+  - alterado propriedade `text` para `description`.
+
 - `QasInput`: adicionado contado no type`textarea`, então caso exista lugares com contadores de caracteres, é necessário remover para não duplicar.
+- `QasCheckboxGroup`: renomeado para `QasCheckbox`.
+- `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
+
+### Adicionado
+- `QasFormGenerator`: adicionado recurso no fieldset para dividir colunas entre eles.
+- `QasRadio`: adicionado novo componente.
+- `QasToggle`: adicionado novo componente.
+- `QasNestedFields`: adicionado nova propriedade `useBox`.
+- `QasBadge`:
+  - adicionado propriedades para renderizar `QChip` (removable, tabindex, modelValue).
+  - adicionado eventos para renderizar `QChip` (remove, update:modelValue).
+
+### Modificado
+- `QasCheckboxGroup`: renomeado para `QasCheckbox`.
+- `QasHeaderActions`: renomeado para `QasHeader`.
+- `QasChartView`: adequado ao componente `QasHeader`.
+- `QasSelect`: alterado layout.
+- `QasNestedFields`: alterado layout.
+- `QasInput`: alterado layout.
+- `QasSearchInput`: alterado layout.
+- `QasFilters`:
+  - alterado layout.
+  - utilizando `QasBadge` ao invés de `QChip`.
 
 ## [3.16.0-beta.10] - 01-08-2024
 ## BREAKING CHANGES
diff --git a/app-extension/src/boot/chart-view.js b/app-extension/src/boot/chart-view.js
index 7595dbc01..d6ac1844b 100644
--- a/app-extension/src/boot/chart-view.js
+++ b/app-extension/src/boot/chart-view.js
@@ -3,7 +3,9 @@ import thirdPartyComponentHandler from '@bildvitta/quasar-ui-asteroid/src/vue-pl
 export default async ({ app }) => {
   const thirdParty = thirdPartyComponentHandler({
     name: 'QasChartView',
-    importFn: () => import('@bildvitta/quasar-ui-asteroid/src/components/chart-view/QasChartView.vue')
+    // TODO: Voltar código comentado antes de publicar
+    importFn: () => import('../../../ui/src/components/chart-view/QasChartView.vue')
+    // importFn: () => import('@bildvitta/quasar-ui-asteroid/src/components/chart-view/QasChartView.vue')
   })
 
   thirdParty.initializeComponent({ app })
diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
index 3d53a45cf..c2f8eadec 100644
--- a/docs/src/assets/menu.js
+++ b/docs/src/assets/menu.js
@@ -184,8 +184,8 @@ module.exports = [
         path: '/components/grid-generator'
       },
       {
-        name: 'HeaderActions',
-        path: '/components/header-actions'
+        name: 'Header',
+        path: '/components/header'
       },
       {
         name: 'InfiniteScroll',
diff --git a/docs/src/examples/QasBadge/Removable.vue b/docs/src/examples/QasBadge/Removable.vue
new file mode 100644
index 000000000..638ef2a02
--- /dev/null
+++ b/docs/src/examples/QasBadge/Removable.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="container q-gutter-md q-py-lg">
+    <qas-badge v-for="(key, value) in badges" :key="value" :color="value" :label="value" removable :text-color="key" />
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    badges () {
+      return {
+        'light-blue-2': 'black',
+        'green-14': 'white',
+        'blue-8': 'white',
+        'grey-10': 'white',
+        'orange-8': 'white',
+        'red-14': 'white',
+        'yellow-14': 'white',
+        'grey-7': 'white',
+        'purple-7': 'white',
+        'amber-2': 'black',
+        'green-11': 'black'
+      }
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QasCheckboxGroup/Children.vue b/docs/src/examples/QasCheckbox/Children.vue
similarity index 84%
rename from docs/src/examples/QasCheckboxGroup/Children.vue
rename to docs/src/examples/QasCheckbox/Children.vue
index f951d0020..73e0f2df4 100644
--- a/docs/src/examples/QasCheckboxGroup/Children.vue
+++ b/docs/src/examples/QasCheckbox/Children.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-checkbox-group v-model="model" label="Aceitar" :options="optionsChildren" />
+    <qas-checkbox v-model="model" label="Aceitar" :options="optionsChildren" />
 
     <div class="q-mt-lg">
       model: {{ model }}
diff --git a/docs/src/examples/QasCheckboxGroup/Options.vue b/docs/src/examples/QasCheckbox/Options.vue
similarity index 88%
rename from docs/src/examples/QasCheckboxGroup/Options.vue
rename to docs/src/examples/QasCheckbox/Options.vue
index 09f531af1..2869f9d04 100644
--- a/docs/src/examples/QasCheckboxGroup/Options.vue
+++ b/docs/src/examples/QasCheckbox/Options.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-checkbox-group v-model="model" :options />
+    <qas-checkbox v-model="model" :options />
 
     <div class="q-mt-lg">
       model: {{ model }}
diff --git a/docs/src/examples/QasCheckboxGroup/Single.vue b/docs/src/examples/QasCheckbox/Single.vue
similarity index 70%
rename from docs/src/examples/QasCheckboxGroup/Single.vue
rename to docs/src/examples/QasCheckbox/Single.vue
index 0af09b620..1a49abdb1 100644
--- a/docs/src/examples/QasCheckboxGroup/Single.vue
+++ b/docs/src/examples/QasCheckbox/Single.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-checkbox-group v-model="model" :false-value="false" label="Aceitar" :true-value="true" />
+    <qas-checkbox v-model="model" :false-value="false" label="Aceitar" :true-value="true" />
 
     <div class="q-mt-lg">
       model: {{ model }}
diff --git a/docs/src/examples/QasFormGenerator/Fieldset.vue b/docs/src/examples/QasFormGenerator/Fieldset.vue
index 349f88135..cbd39b206 100644
--- a/docs/src/examples/QasFormGenerator/Fieldset.vue
+++ b/docs/src/examples/QasFormGenerator/Fieldset.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-form-generator v-model="model" :columns="columns" :fields="fields" :fields-props="fieldsProps" :fieldset="fieldset" />
+    <qas-form-generator v-model="model" :columns="columns" :fields="fields" :fields-props="fieldsProps" :fieldset="fieldset" fieldset-gutter="lg" :use-box="true" />
 
     <div class="q-mt-lg">
       model: <qas-debugger :inspect="[model]" />
@@ -38,13 +38,15 @@ export default {
         personalInformation: {
           label: 'Informações pessoais',
           description: 'Informe o nome e email do usuário.',
-          fields: ['isActive', 'name', 'email']
+          fields: ['isActive', 'name', 'email'],
+          column: { col: 12, sm: 6 }
         },
 
         another: {
           label: 'Outras informações',
           description: 'Informe a empresa, telefone e documento do usuário.',
-          fields: ['phone', 'company']
+          fields: ['phone', 'company'],
+          column: { col: 12, sm: 6 }
         }
       }
     },
diff --git a/docs/src/examples/QasHeaderActions/HeaderActionsWithActionsMenu.vue b/docs/src/examples/QasHeader/HeaderWithActionsMenu.vue
similarity index 68%
rename from docs/src/examples/QasHeaderActions/HeaderActionsWithActionsMenu.vue
rename to docs/src/examples/QasHeader/HeaderWithActionsMenu.vue
index 0c396a087..386938002 100644
--- a/docs/src/examples/QasHeaderActions/HeaderActionsWithActionsMenu.vue
+++ b/docs/src/examples/QasHeader/HeaderWithActionsMenu.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="container spaced">
-    <qas-header-actions class="q-mb-md" v-bind="headerActionsProps" />
+    <qas-header class="q-mb-md" v-bind="headerProps" />
   </div>
 </template>
 
 <script>
 export default {
   computed: {
-    headerActionsProps () {
+    headerProps () {
       return {
-        text: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
+        description: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
         actionsMenuProps: {
           deleteProps: {
             entity: 'users'
diff --git a/docs/src/examples/QasHeaderActions/HeaderActionsWithButton.vue b/docs/src/examples/QasHeader/HeaderWithButton.vue
similarity index 52%
rename from docs/src/examples/QasHeaderActions/HeaderActionsWithButton.vue
rename to docs/src/examples/QasHeader/HeaderWithButton.vue
index 215a23ac9..bbdfdd3f4 100644
--- a/docs/src/examples/QasHeaderActions/HeaderActionsWithButton.vue
+++ b/docs/src/examples/QasHeader/HeaderWithButton.vue
@@ -1,15 +1,18 @@
 <template>
   <div class="container spaced">
-    <qas-header-actions v-bind="headerActionsProps" />
+    <qas-header v-bind="headerProps" />
   </div>
 </template>
 
 <script>
 export default {
   computed: {
-    headerActionsProps () {
+    headerProps () {
       return {
-        text: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
+        description: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
+        labelProps: {
+          label: 'Título do header'
+        },
         buttonProps: {
           icon: 'sym_r_add',
           label: 'Novo usuário'
diff --git a/docs/src/examples/QasHeader/HeaderWithSlots.vue b/docs/src/examples/QasHeader/HeaderWithSlots.vue
new file mode 100644
index 000000000..6b6b19f52
--- /dev/null
+++ b/docs/src/examples/QasHeader/HeaderWithSlots.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="container spaced">
+    <qas-header>
+      <template #left>
+        Slot da esquerda!
+      </template>
+
+      <template #right>
+        Slot da direita!
+      </template>
+    </qas-header>
+  </div>
+</template>
diff --git a/docs/src/examples/QasHeaderActions/HeaderActionsWithSlots.vue b/docs/src/examples/QasHeaderActions/HeaderActionsWithSlots.vue
deleted file mode 100644
index 800c79171..000000000
--- a/docs/src/examples/QasHeaderActions/HeaderActionsWithSlots.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="container spaced">
-    <qas-header-actions>
-      <template #left>
-        Slot da esquerda!
-      </template>
-
-      <template #right>
-        Slot da direita!
-      </template>
-    </qas-header-actions>
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    headerActionsProps () {
-      return {
-        text: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
-        buttonProps: {
-          icon: 'sym_r_add',
-          label: 'Novo usuário'
-        }
-      }
-    }
-  }
-}
-</script>
diff --git a/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue b/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue
index e648a655f..405f18c02 100644
--- a/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue
+++ b/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-page-header :breadcrumbs="breadcrumbs" :header-actions-props="headerActionsProps" title="Nome do usuário" />
+    <qas-page-header :breadcrumbs="breadcrumbs" :header-props="headerProps" title="Nome do usuário" />
   </div>
 </template>
 
@@ -26,7 +26,7 @@ export default {
       ]
     },
 
-    headerActionsProps () {
+    headerProps () {
       return {
         text: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
         actionsMenuProps: {
diff --git a/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue b/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue
index 3e1900a1f..3d980d086 100644
--- a/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue
+++ b/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-page-header :breadcrumbs="breadcrumbs" :header-actions-props="headerActionsProps" title="Nome do usuário" />
+    <qas-page-header :breadcrumbs="breadcrumbs" :header-props="headerProps" title="Nome do usuário" />
   </div>
 </template>
 
@@ -26,7 +26,7 @@ export default {
       ]
     },
 
-    headerActionsProps () {
+    headerProps () {
       return {
         text: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
         buttonProps: {
diff --git a/docs/src/examples/QasToggle/Basic.vue b/docs/src/examples/QasToggle/Basic.vue
index 873637bb6..c7577cc81 100644
--- a/docs/src/examples/QasToggle/Basic.vue
+++ b/docs/src/examples/QasToggle/Basic.vue
@@ -1,17 +1,11 @@
 <template>
   <div class="container spaced">
-    <qas-toggle v-model="model" label="Ativar" />
-
-    <div class="q-mt-lg">
-      model: {{ model }}
-    </div>
+    <qas-chip>
+      Eai
+    </qas-chip>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
 defineOptions({ name: 'Basic' })
-
-const model = ref(false)
 </script>
diff --git a/docs/src/pages/components/badge.md b/docs/src/pages/components/badge.md
index 3d8e66d63..f557af20e 100644
--- a/docs/src/pages/components/badge.md
+++ b/docs/src/pages/components/badge.md
@@ -2,18 +2,16 @@
 title: QasBadge
 ---
 
-Componente wrapper do QBadge do quasar.
+Componente wrapper do QBadge/QChip do quasar.
 
 <doc-api file="badge/QasBadge" name="QasBadge" />
 
 :::tip
-Apesar de ser um wrapper do Quasar, ele só repassa as propriedades:
-- color
-- label
-- multi-line
-- text-color
+- Quando usado como "removable" ele renderiza um QChip.
+- Quando usado sem "removable" ele renderiza um QBadge.
 :::
 
 ## Uso
 
-<doc-example file="QasBadge/Basic" title="Básico" />
+<doc-example file="QasBadge/Basic" title="Básico/QBadge" />
+<doc-example file="QasBadge/Removable" title="Removível/QChip" />
diff --git a/docs/src/pages/components/checkbox-group.md b/docs/src/pages/components/checkbox-group.md
deleted file mode 100644
index 9ab931bd8..000000000
--- a/docs/src/pages/components/checkbox-group.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: QasCheckboxGroup
----
-
-Componente para gerar dinamicamente checkbox agrupados.
-
-<doc-api file="checkbox-group/QasCheckboxGroup" name="QasCheckboxGroup" />
-
-## Uso
-
-<doc-example file="QasCheckboxGroup/Single" title="Single" />
-<doc-example file="QasCheckboxGroup/Options" title="Options" />
-<doc-example file="QasCheckboxGroup/Children" title="Children options" />
diff --git a/docs/src/pages/components/checkbox.md b/docs/src/pages/components/checkbox.md
new file mode 100644
index 000000000..cd373d837
--- /dev/null
+++ b/docs/src/pages/components/checkbox.md
@@ -0,0 +1,13 @@
+---
+title: QasCheckbox
+---
+
+Componente para gerar dinamicamente checkbox agrupados.
+
+<doc-api file="checkbox/QasCheckbox" name="QasCheckbox" />
+
+## Uso
+
+<doc-example file="QasCheckbox/Single" title="Single" />
+<doc-example file="QasCheckbox/Options" title="Options" />
+<doc-example file="QasCheckbox/Children" title="Children options" />
diff --git a/docs/src/pages/components/form-generator.md b/docs/src/pages/components/form-generator.md
index 09a7fe059..e22a079c0 100644
--- a/docs/src/pages/components/form-generator.md
+++ b/docs/src/pages/components/form-generator.md
@@ -15,8 +15,8 @@ Para saber mais sobre o **API Design Pattern** clice [aqui](https://www.notion.s
 :::
 
 ## Uso
-<!-- <doc-example file="QasFormGenerator/Basic" title="Básico" />
-<doc-example file="QasFormGenerator/Boxed" title="Com box" /> -->
+<doc-example file="QasFormGenerator/Basic" title="Básico" />
+<!-- <doc-example file="QasFormGenerator/Boxed" title="Com box" /> -->
 
 :::tip
 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.
diff --git a/docs/src/pages/components/header-actions.md b/docs/src/pages/components/header-actions.md
deleted file mode 100644
index fb2bd2b4e..000000000
--- a/docs/src/pages/components/header-actions.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: QasHeaderActions
----
-
-Componente para cabeçalho usado com alguma descrição e ação.
-
-<doc-api file="header-actions/QasHeaderActions" name="QasHeaderActions" />
-
-## Uso
-
-<doc-example file="QasHeaderActions/HeaderActionsWithButton" title="Com QasBtn" />
-<doc-example file="QasHeaderActions/HeaderActionsWithActionsMenu" title="Com QasActionsMenu" />
-<doc-example file="QasHeaderActions/HeaderActionsWithSlots" title="Com slot" />
diff --git a/docs/src/pages/components/header.md b/docs/src/pages/components/header.md
new file mode 100644
index 000000000..9e5d5e91c
--- /dev/null
+++ b/docs/src/pages/components/header.md
@@ -0,0 +1,13 @@
+---
+title: QasHeader
+---
+
+Componente para cabeçalho usado com alguma descrição e ação.
+
+<doc-api file="header/QasHeader" name="QasHeader" />
+
+## Uso
+
+<doc-example file="QasHeader/HeaderWithButton" title="Com QasBtn" />
+<doc-example file="QasHeader/HeaderWithActionsMenu" title="Com QasActionsMenu" />
+<doc-example file="QasHeader/HeaderWithSlots" title="Com slot" />
diff --git a/ui/src/components/badge/QasBadge.vue b/ui/src/components/badge/QasBadge.vue
index fecaf81b1..c76c6408f 100644
--- a/ui/src/components/badge/QasBadge.vue
+++ b/ui/src/components/badge/QasBadge.vue
@@ -1,10 +1,12 @@
 <template>
-  <q-badge v-bind="props" :aria-multiline="props.multiLine" class="q-px-sm q-py-xs qas-badge text-caption">
+  <component :is="component.is" v-bind="component.props" class="q-px-sm q-py-xs qas-badge text-caption">
     <slot />
-  </q-badge>
+  </component>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+
 defineOptions({
   name: 'QasBadge',
   inheritAttrs: false
@@ -28,6 +30,50 @@ const props = defineProps({
   textColor: {
     type: String,
     default: 'black'
+  },
+
+  removable: {
+    type: Boolean
+  },
+
+  tabindex: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+
+const emit = defineEmits(['remove'])
+const model = defineModel({ type: Boolean, default: true })
+
+const component = computed(() => {
+  const isChip = props.removable
+
+  return {
+    is: isChip ? 'q-chip' : 'q-badge',
+    props: {
+      // comum
+      color: props.color,
+      dense: true,
+      textColor: props.textColor,
+      label: props.label,
+
+      // somente QChip
+      ...(isChip && {
+        iconRemove: 'sym_r_close',
+        removable: true,
+        square: true,
+        tabindex: props.tabindex,
+        modelValue: model.value,
+        ripple: false,
+        onRemove: () => emit('remove')
+      }),
+
+      // somente QBadge
+      ...(!isChip && {
+        multiLine: props.multiLine,
+        ariaMultiline: props.multiLine
+      })
+    }
   }
 })
 </script>
diff --git a/ui/src/components/badge/QasBadge.yml b/ui/src/components/badge/QasBadge.yml
index 803005df2..2b7f93473 100644
--- a/ui/src/components/badge/QasBadge.yml
+++ b/ui/src/components/badge/QasBadge.yml
@@ -1,7 +1,7 @@
 type: component
 
 meta:
-  desc: Componente wrapper do QBadge do quasar.
+  desc: Componente wrapper do QBadge/QChip do quasar.
 
 props:
   color:
@@ -23,6 +23,33 @@ props:
     default: black
     type: String
 
+  removable:
+    desc: Transforma componente em QChip.
+    default: false
+    type: Boolean
+
+  tabindex:
+    desc: Usado para "foco" (usar junto a propriedade "removable").
+    default: undefined
+    type: [String, Number]
+
+  model-value:
+    desc: Model do componente (usar junto a propriedade "removable").
+    default: true
+    type: Boolean
+
 slots:
   default:
-    desc: Slot do conteúdo do badge.
+    desc: Slot do conteúdo do badge/chip.
+
+events:
+  '@remove -> function()':
+    desc: Evento emitido ao clicar no botão de remoção.
+
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean
+
diff --git a/ui/src/components/chart-view/QasChartView.vue b/ui/src/components/chart-view/QasChartView.vue
index 5c74743ce..8529621da 100644
--- a/ui/src/components/chart-view/QasChartView.vue
+++ b/ui/src/components/chart-view/QasChartView.vue
@@ -1,19 +1,9 @@
 <template>
-  <qas-header-actions v-if="hasHeaderActions" align-columns="end">
-    <template #left>
-      <h3 v-if="title" class="text-h3">
-        {{ title }}
-      </h3>
-
-      <div v-if="subtitle" class="text-body1 text-grey-8">
-        {{ subtitle }}
-      </div>
-    </template>
-
+  <qas-header v-if="hasHeader" v-bind="headerProps">
     <template #right>
       <qas-filters v-bind="chartFiltersProps" />
     </template>
-  </qas-header-actions>
+  </qas-header>
 
   <div v-bind="parentComponentProps">
     <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
@@ -271,7 +261,7 @@ export default {
       return !!this.chartData?.datasets.filter(dataset => dataset.data.length)?.length
     },
 
-    hasHeaderActions () {
+    hasHeader () {
       return this.title || this.subtitle || this.useFilterButton
     },
 
@@ -308,6 +298,16 @@ export default {
         doughnut: [ArcElement],
         line: [LineElement]
       }
+    },
+
+    headerProps () {
+      return {
+        alignColumns: 'end',
+        description: this.subtitle,
+        labelProps: {
+          label: this.title
+        }
+      }
     }
   },
 
diff --git a/ui/src/components/checkbox-group/QasCheckboxGroup.vue b/ui/src/components/checkbox/QasCheckbox.vue
similarity index 99%
rename from ui/src/components/checkbox-group/QasCheckboxGroup.vue
rename to ui/src/components/checkbox/QasCheckbox.vue
index ea35d39ab..07effaa3a 100644
--- a/ui/src/components/checkbox-group/QasCheckboxGroup.vue
+++ b/ui/src/components/checkbox/QasCheckbox.vue
@@ -25,7 +25,7 @@
 import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
 defineOptions({
-  name: 'QasCheckboxGroup',
+  name: 'QasCheckbox',
   inheritAttrs: false
 })
 
diff --git a/ui/src/components/checkbox-group/QasCheckboxGroup.yml b/ui/src/components/checkbox/QasCheckbox.yml
similarity index 100%
rename from ui/src/components/checkbox-group/QasCheckboxGroup.yml
rename to ui/src/components/checkbox/QasCheckbox.yml
diff --git a/ui/src/components/field/QasField.vue b/ui/src/components/field/QasField.vue
index 6f3ecc8d0..72c5004a0 100644
--- a/ui/src/components/field/QasField.vue
+++ b/ui/src/components/field/QasField.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import QasCheckboxGroup from '../checkbox-group/QasCheckboxGroup.vue'
+import QasCheckbox from '../checkbox/QasCheckbox.vue'
 import QasDateTimeInput from '../date-time-input/QasDateTimeInput.vue'
 import QasInput from '../input/QasInput.vue'
 import QasNumericInput from '../numeric-input/QasNumericInput.vue'
@@ -28,7 +28,7 @@ export default {
   name: 'QasField',
 
   components: {
-    QasCheckboxGroup,
+    QasCheckbox,
     QasDateTimeInput,
     QasInput,
     QasNumericInput,
@@ -144,7 +144,7 @@ export default {
         time: { ...datetimeInput, useTimeOnly: true },
 
         boolean: { is: QasToggle, label, ...error },
-        checkbox: { is: 'qas-checkbox-group', label, options, ...error },
+        checkbox: { is: 'qas-checkbox', label, options, ...error },
         radio: { is: QasRadio, label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },
diff --git a/ui/src/components/filters/QasFilters.vue b/ui/src/components/filters/QasFilters.vue
index fc2be08d5..9c5945433 100644
--- a/ui/src/components/filters/QasFilters.vue
+++ b/ui/src/components/filters/QasFilters.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :class="filtersClass">
+  <section class="qas-filters" :class="filtersClass">
     <div v-if="showFilters" class="q-col-gutter-x-md row">
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
@@ -15,7 +15,7 @@
         </slot>
       </div>
 
-      <div v-else-if="showFilterButton" class="col-12 col-md-6">
+      <div v-else-if="showFilterButton" class="col-12">
         <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
           <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="internalFilters" v-bind="filterButtonProps" />
         </slot>
@@ -27,10 +27,11 @@
     </div>
 
     <div v-if="hasChip" class="q-mt-md">
-      <!-- TODO rever com novo estilo -->
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="sym_r_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">
-        <span class="ellipsis" style="max-width: 100px;" :title="filterItem.label">{{ filterItem.label }}</span> : "{{ getChipValue(filterItem.value) }}"
-      </q-chip>
+      <qas-badge v-for="(filterItem, key) in activeFilters" :key="key" :data-cy="`filters-${filterItem.value}-chip`" removable @remove="removeFilter(filterItem)">
+        <div class="ellipsis qas-filters__badge-content" :title="getChipValue(filterItem.value)">
+          {{ filterItem.label }}: "{{ getChipValue(filterItem.value) }}"
+        </div>
+      </qas-badge>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -461,3 +462,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-filters {
+  &__badge-content {
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/ui/src/components/form-generator/QasFormGenerator.vue b/ui/src/components/form-generator/QasFormGenerator.vue
index 6a684ca01..8aee22713 100644
--- a/ui/src/components/form-generator/QasFormGenerator.vue
+++ b/ui/src/components/form-generator/QasFormGenerator.vue
@@ -1,9 +1,10 @@
 <template>
   <div :class="fieldsetClasses">
-    <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
+    <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>
 
@@ -87,7 +88,8 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 // composables
-const { classes, getFieldClass } = useGenerator({ props })
+const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
+console.log('TCL: _getBreakpoint', getFieldSetColumnClass(undefined))
 
 const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
@@ -146,6 +148,7 @@ const normalizedFields = computed(() => {
     fields[fieldsetKey] = {
       label: fieldsetItem.label,
       description: fieldsetItem.description,
+      column: fieldsetItem.column,
       fields: { hidden: {}, visible: {} }
     }
 
@@ -191,7 +194,7 @@ function useFieldset ({ props }) {
     const classes = ['row']
 
     if (props.fieldsetGutter) {
-      classes.push(`q-col-gutter-y-${props.fieldsetGutter}`)
+      classes.push(`q-col-gutter-${props.fieldsetGutter}`)
     }
 
     return classes
diff --git a/ui/src/components/header-actions/QasHeaderActions.vue b/ui/src/components/header/QasHeader.vue
similarity index 74%
rename from ui/src/components/header-actions/QasHeaderActions.vue
rename to ui/src/components/header/QasHeader.vue
index ee89c2d44..654a97b41 100644
--- a/ui/src/components/header-actions/QasHeaderActions.vue
+++ b/ui/src/components/header/QasHeader.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="justify-between no-wrap q-col-gutter-x-md row text-body1 text-grey-8" :class="containerClass">
+  <div class="justify-between no-wrap q-col-gutter-x-md row" :class="containerClass">
     <div :class="leftClass">
       <slot name="left">
-        {{ props.text }}
+        <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
+
+        <span v-if="props.description" class="text-body1 text-grey-8">
+          {{ props.description }}
+        </span>
       </slot>
     </div>
 
@@ -23,7 +27,7 @@ import { gutterValidator } from '../../helpers/private/gutter-validator'
 
 import { computed, useSlots } from 'vue'
 
-defineOptions({ name: 'QasHeaderActions' })
+defineOptions({ name: 'QasHeader' })
 
 const props = defineProps({
   actionsMenuProps: {
@@ -42,7 +46,7 @@ const props = defineProps({
     type: Object
   },
 
-  text: {
+  description: {
     type: String,
     default: ''
   },
@@ -51,6 +55,11 @@ const props = defineProps({
     default: Spacing.Xl,
     type: String,
     validator: gutterValidator
+  },
+
+  labelProps: {
+    type: Object,
+    default: () => ({})
   }
 })
 
@@ -65,6 +74,14 @@ const leftClass = computed(() => {
   }
 })
 
+const defaultLabelProps = computed(() => {
+  return {
+    margin: 'xs',
+    ...props.labelProps
+  }
+})
+
+const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
 const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
 
diff --git a/ui/src/components/header-actions/QasHeaderActions.yml b/ui/src/components/header/QasHeader.yml
similarity index 98%
rename from ui/src/components/header-actions/QasHeaderActions.yml
rename to ui/src/components/header/QasHeader.yml
index e68c2db72..ddccd04d9 100644
--- a/ui/src/components/header-actions/QasHeaderActions.yml
+++ b/ui/src/components/header/QasHeader.yml
@@ -20,7 +20,7 @@ props:
     default: {}
     type: Object
 
-  text:
+  description:
     desc: Descrição da seção a esquerda.
     type: String
 
diff --git a/ui/src/components/nested-fields/QasNestedFields.vue b/ui/src/components/nested-fields/QasNestedFields.vue
index 185c9409c..7629c1db9 100644
--- a/ui/src/components/nested-fields/QasNestedFields.vue
+++ b/ui/src/components/nested-fields/QasNestedFields.vue
@@ -199,8 +199,7 @@ export default {
     },
 
     useBox: {
-      type: Boolean,
-      default: true
+      type: Boolean
     },
 
     useDestroyAlways: {
diff --git a/ui/src/components/nested-fields/QasNestedFields.yml b/ui/src/components/nested-fields/QasNestedFields.yml
index 4c2f9cded..abdc2decf 100644
--- a/ui/src/components/nested-fields/QasNestedFields.yml
+++ b/ui/src/components/nested-fields/QasNestedFields.yml
@@ -113,6 +113,11 @@ props:
     default: true
     type: Boolean
 
+  use-box:
+    desc: Contra o QasBox.
+    default: false
+    type: Boolean
+
   use-destroy-always:
     desc: Controla o botão de remover em todas linhas, incluindo a primeira.
     type: Boolean
diff --git a/ui/src/components/page-header/QasPageHeader.vue b/ui/src/components/page-header/QasPageHeader.vue
index 896e918ec..34234fdd3 100644
--- a/ui/src/components/page-header/QasPageHeader.vue
+++ b/ui/src/components/page-header/QasPageHeader.vue
@@ -18,14 +18,14 @@
 
     <div>
       <slot name="bottom">
-        <qas-header-actions v-if="hasHeaderActions" v-bind="props.headerActionsProps" />
+        <qas-header v-if="hasHeader" v-bind="props.headerProps" />
       </slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import QasHeaderActions from '../header-actions/QasHeaderActions.vue'
+import QasHeader from '../header/QasHeader.vue'
 
 import { castArray } from 'lodash-es'
 import { computed } from 'vue'
@@ -40,7 +40,7 @@ const props = defineProps({
     type: [Array, String]
   },
 
-  headerActionsProps: {
+  headerProps: {
     default: () => ({}),
     type: Object
   },
@@ -111,7 +111,7 @@ const normalizedBreadcrumbs = computed(() => {
   ]
 })
 
-const hasHeaderActions = computed(() => !!Object.keys(props.headerActionsProps).length)
+const hasHeader = computed(() => !!Object.keys(props.headerProps).length)
 
 const homeRoute = computed(() => router.hasRoute('Root') ? { name: 'Root' } : '/')
 </script>
diff --git a/ui/src/components/page-header/QasPageHeader.yml b/ui/src/components/page-header/QasPageHeader.yml
index 46a8be660..e8f6fc131 100644
--- a/ui/src/components/page-header/QasPageHeader.yml
+++ b/ui/src/components/page-header/QasPageHeader.yml
@@ -15,7 +15,7 @@ props:
     desc: Título do cabeçalho.
     type: String
 
-  header-actions-props:
+  header-props:
     desc: Propriedades do QasHeaderActions.
     default: {}
     type: Object
@@ -39,4 +39,4 @@ slots:
     desc: slot para acessar abaixo do titulo e breadcrumbs.
 
   default:
-    desc: slot para acessar lado direito do titulo e breadcrumbs.
\ No newline at end of file
+    desc: slot para acessar lado direito do titulo e breadcrumbs.
diff --git a/ui/src/components/select/QasSelect.vue b/ui/src/components/select/QasSelect.vue
index e4902eab4..6ed68abb1 100644
--- a/ui/src/components/select/QasSelect.vue
+++ b/ui/src/components/select/QasSelect.vue
@@ -23,22 +23,26 @@
     </template>
 
     <template v-if="attributes.useChips" #selected-item="{ opt, tabindex, index, removeAtIndex }">
-      <q-chip
-        class="q-px-sm q-py-xs text-bold"
-        color="black"
+      <qas-badge removable :tabindex @remove="removeAtIndex(index)">
+        <div class="ellipsis" :title="opt.label">
+          {{ opt.label }}
+        </div>
+      </qas-badge>
+      <!-- <q-chip
+        color="light-blue-2"
         dense
         :disable="isDisabled"
         icon-remove="sym_r_close"
         removable
         square
         :tabindex
-        text-color="white"
+        text-color="black"
         @remove="removeAtIndex(index)"
       >
         <div class="ellipsis" :title="opt.label">
           {{ opt.label }}
         </div>
-      </q-chip>
+      </q-chip> -->
     </template>
 
     <template v-for="(_, name) in $slots" #[name]="context">
@@ -49,11 +53,12 @@
 
 <script>
 import { getRequiredLabel } from '../../helpers'
-import { uid } from 'quasar'
 import { searchFilterMixin } from '../../mixins'
-import Fuse from 'fuse.js'
 import fuseConfig from '../../shared/fuse-config'
 
+import { uid } from 'quasar'
+import Fuse from 'fuse.js'
+
 export default {
   name: 'QasSelect',
 
diff --git a/ui/src/composables/private/use-generator.js b/ui/src/composables/private/use-generator.js
index a340ed418..1eeb9106d 100644
--- a/ui/src/composables/private/use-generator.js
+++ b/ui/src/composables/private/use-generator.js
@@ -75,12 +75,19 @@ export default function ({ props = {} }) {
       : _handleColumnsByField({ index, isGridGenerator })
   }
 
+  function getFieldSetColumnClass (column) {
+    if (!column) return 'col-12'
+
+    return typeof column === 'string' ? _getStringColumns(column) : _getBreakpoint(column)
+  }
+
   /**
    * @private
    */
   function _getStringColumns (columns) {
     return IRREGULAR_CLASSES.includes(columns) ? columns : `col-${columns}`
   }
+
   /**
    * @private
    */
@@ -167,6 +174,7 @@ export default function ({ props = {} }) {
   return {
     classes,
 
-    getFieldClass
+    getFieldClass,
+    getFieldSetColumnClass
   }
 }
diff --git a/ui/src/vue-plugin.js b/ui/src/vue-plugin.js
index fffccd4ab..7fe164306 100644
--- a/ui/src/vue-plugin.js
+++ b/ui/src/vue-plugin.js
@@ -13,7 +13,7 @@ import QasBtn from './components/btn/QasBtn.vue'
 import QasBtnDropdown from './components/btn-dropdown/QasBtnDropdown.vue'
 import QasCard from './components/card/QasCard.vue'
 import QasCardImage from './components/card-image/QasCardImage.vue'
-import QasCheckboxGroup from './components/checkbox-group/QasCheckboxGroup.vue'
+import QasCheckbox from './components/checkbox/QasCheckbox.vue'
 import QasCopy from './components/copy/QasCopy.vue'
 import QasDate from './components/date/QasDate.vue'
 import QasDateTimeInput from './components/date-time-input/QasDateTimeInput.vue'
@@ -32,7 +32,7 @@ import QasGallery from './components/gallery/QasGallery.vue'
 import QasGalleryCard from './components/gallery-card/QasGalleryCard.vue'
 import QasGrabbable from './components/grabbable/QasGrabbable.vue'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
-import QasHeaderActions from './components/header-actions/QasHeaderActions.vue'
+import QasHeader from './components/header/QasHeader.vue'
 import QasInfiniteScroll from './components/infinite-scroll/QasInfiniteScroll.vue'
 import QasInput from './components/input/QasInput.vue'
 import QasLabel from './components/label/QasLabel.vue'
@@ -109,7 +109,7 @@ async function install (app) {
   app.component('QasBtnDropdown', QasBtnDropdown)
   app.component('QasCard', QasCard)
   app.component('QasCardImage', QasCardImage)
-  app.component('QasCheckboxGroup', QasCheckboxGroup)
+  app.component('QasCheckbox', QasCheckbox)
   app.component('QasCopy', QasCopy)
   app.component('QasDate', QasDate)
   app.component('QasDateTimeInput', QasDateTimeInput)
@@ -128,7 +128,7 @@ async function install (app) {
   app.component('QasGalleryCard', QasGalleryCard)
   app.component('QasGrabbable', QasGrabbable)
   app.component('QasGridGenerator', QasGridGenerator)
-  app.component('QasHeaderActions', QasHeaderActions)
+  app.component('QasHeader', QasHeader)
   app.component('QasInfiniteScroll', QasInfiniteScroll)
   app.component('QasInput', QasInput)
   app.component('QasLabel', QasLabel)
@@ -207,7 +207,7 @@ export {
   QasBtn,
   QasBtnDropdown,
   QasCard,
-  QasCheckboxGroup,
+  QasCheckbox,
   QasCopy,
   QasDate,
   QasDateTimeInput,
@@ -226,7 +226,7 @@ export {
   QasGalleryCard,
   QasGrabbable,
   QasGridGenerator,
-  QasHeaderActions,
+  QasHeader,
   QasInfiniteScroll,
   QasInput,
   QasLabel,

From e1838239bb6db7e428cfda2a5e4f0f3c7d5dff31 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Wed, 7 Aug 2024 10:20:49 -0300
Subject: [PATCH 10/22] Changes for pull request

---
 CHANGELOG.md                                  | 31 +++++++++++++---
 .../examples/QasHeader/HeaderWithBadges.vue   | 37 +++++++++++++++++++
 docs/src/pages/components/header.md           |  3 +-
 ui/src/components/box/QasBox.yml              |  4 ++
 ui/src/components/field/QasField.vue          |  8 ++--
 .../form-generator/QasFormGenerator.yml       |  5 +++
 ui/src/components/header/QasHeader.vue        | 24 +++++++++++-
 ui/src/components/header/QasHeader.yml        | 10 +++++
 ui/src/components/input/QasInput.yml          | 10 +++++
 .../numeric-input/QasNumericInput.yml         | 10 +++++
 ui/src/components/select/QasSelect.vue        | 16 --------
 11 files changed, 130 insertions(+), 28 deletions(-)
 create mode 100644 docs/src/examples/QasHeader/HeaderWithBadges.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 550d69d83..a0e21cc70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,35 +22,54 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
   - Caso esteja usando `QChip` (fora do QasSelect) substituir o uso pelo `QasBadge` com a prop `removable`.
   - Atentar-se para possíveis breaking changes nos inputs: `QasToggle`, `QasCheckbox`, e `QasRadio`, validar nos formulários dos produtos.
 
-- `QasHeaderActions`:
+- `QasHeaderActions/QasHeader`:
   - renomeado para `QasHeader`.
   - alterado propriedade `text` para `description`.
 
 - `QasInput`: adicionado contado no type`textarea`, então caso exista lugares com contadores de caracteres, é necessário remover para não duplicar.
-- `QasCheckboxGroup`: renomeado para `QasCheckbox`.
+- `QasCheckboxGroup/QasCheckbox`: renomeado para `QasCheckbox`.
 - `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
 
 ### Adicionado
-- `QasFormGenerator`: adicionado recurso no fieldset para dividir colunas entre eles.
 - `QasRadio`: adicionado novo componente.
 - `QasToggle`: adicionado novo componente.
 - `QasNestedFields`: adicionado nova propriedade `useBox`.
+- `QasBox`: adicionado nova propriedade `useSpacing`.
+- `QasHeaderActions/QasHeader`: adicionado novas propriedades `labelProps` e `badges`.
+- `QasInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
+- `QasNumericInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
+
+- `QasFormGenerator`:
+  - adicionado recurso no fieldset para dividir colunas entre eles.
+  - adicionado novas propriedades `useBox` e `boxProps`.
+
 - `QasBadge`:
-  - adicionado propriedades para renderizar `QChip` (removable, tabindex, modelValue).
-  - adicionado eventos para renderizar `QChip` (remove, update:modelValue).
+  - adicionado propriedades para renderizar `QChip` (`removable`, `tabindex`, `modelValue`).
+  - adicionado eventos para renderizar `QChip` (`remove`, `update:modelValue`).
 
 ### Modificado
-- `QasCheckboxGroup`: renomeado para `QasCheckbox`.
 - `QasHeaderActions`: renomeado para `QasHeader`.
 - `QasChartView`: adequado ao componente `QasHeader`.
 - `QasSelect`: alterado layout.
 - `QasNestedFields`: alterado layout.
 - `QasInput`: alterado layout.
 - `QasSearchInput`: alterado layout.
+- `QasField`: alterações para layout e novos componentes.
+- `QasHeaderActions/QasHeader`: alterado propriedade `text` para `description`.
+
+- adicionado placeholder padrão:
+  - `QasDatetimeInput`.
+  - `QasInput`.
+  - `QasNumericInput`.
+
 - `QasFilters`:
   - alterado layout.
   - utilizando `QasBadge` ao invés de `QChip`.
 
+- `QasCheckboxGroup/QasCheckbox`:
+  - renomeado para `QasCheckbox`.
+  - agora quando não é passado `options` o componente opera em modo "single".
+
 ## [3.16.0-beta.10] - 01-08-2024
 ## BREAKING CHANGES
 - `QasSingleView`: Possível breaking change ao utilizar o `before-fetch`.
diff --git a/docs/src/examples/QasHeader/HeaderWithBadges.vue b/docs/src/examples/QasHeader/HeaderWithBadges.vue
new file mode 100644
index 000000000..6ee40b28a
--- /dev/null
+++ b/docs/src/examples/QasHeader/HeaderWithBadges.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="container spaced">
+    <qas-header v-bind="headerProps" />
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    headerProps () {
+      return {
+        description: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
+
+        labelProps: {
+          label: 'Título do header'
+        },
+
+        badges: [
+          {
+            label: 'Badge 1'
+          },
+          {
+            label: 'Badge 2',
+            color: 'red-14',
+            textColor: 'white'
+          },
+          {
+            label: 'Badge 3',
+            color: 'primary',
+            textColor: 'white'
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/components/header.md b/docs/src/pages/components/header.md
index 9e5d5e91c..fb6066cc5 100644
--- a/docs/src/pages/components/header.md
+++ b/docs/src/pages/components/header.md
@@ -9,5 +9,6 @@ Componente para cabeçalho usado com alguma descrição e ação.
 ## Uso
 
 <doc-example file="QasHeader/HeaderWithButton" title="Com QasBtn" />
-<doc-example file="QasHeader/HeaderWithActionsMenu" title="Com QasActionsMenu" />
+<doc-example file="QasHeader/HeaderWithBadges" title="Com badges" />
+<doc-example file="QasHeader/HeaderWithActionsMenu" title="Com QasActionsMenu e somente descrição" />
 <doc-example file="QasHeader/HeaderWithSlots" title="Com slot" />
diff --git a/ui/src/components/box/QasBox.yml b/ui/src/components/box/QasBox.yml
index fb8f11516..dedada881 100644
--- a/ui/src/components/box/QasBox.yml
+++ b/ui/src/components/box/QasBox.yml
@@ -11,3 +11,7 @@ props:
   unelevated:
     desc: Remove a sombra do componente.
     type: Boolean
+
+  use-spacing:
+    desc: Controla espaçamento do componente.
+    type: Boolean
diff --git a/ui/src/components/field/QasField.vue b/ui/src/components/field/QasField.vue
index 72c5004a0..a386ef6e3 100644
--- a/ui/src/components/field/QasField.vue
+++ b/ui/src/components/field/QasField.vue
@@ -35,7 +35,9 @@ export default {
     QasOptionGroup,
     QasPasswordInput,
     QasSignatureUploader,
-    QasUploader
+    QasUploader,
+    QasToggle,
+    QasRadio
   },
 
   inheritAttrs: false,
@@ -143,9 +145,9 @@ export default {
         datetime: { ...datetimeInput },
         time: { ...datetimeInput, useTimeOnly: true },
 
-        boolean: { is: QasToggle, label, ...error },
+        boolean: { is: 'qas-toggle', label, ...error },
         checkbox: { is: 'qas-checkbox', label, options, ...error },
-        radio: { is: QasRadio, label, options },
+        radio: { is: 'qas-radio', label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },
         editor: { is: 'q-editor', toolbar, ...error },
diff --git a/ui/src/components/form-generator/QasFormGenerator.yml b/ui/src/components/form-generator/QasFormGenerator.yml
index 3b74d032c..a1a8f6c8a 100644
--- a/ui/src/components/form-generator/QasFormGenerator.yml
+++ b/ui/src/components/form-generator/QasFormGenerator.yml
@@ -19,6 +19,11 @@ props:
     default: "false"
     type: Boolean
 
+  box-props:
+    desc: Propriedades repassadas para o componente `QasBox`.
+    default: {}
+    type: Object
+
   error:
     desc: Objeto contendo propriedades contendo a mensagem de erro.
     default: {}
diff --git a/ui/src/components/header/QasHeader.vue b/ui/src/components/header/QasHeader.vue
index 654a97b41..9f06eac36 100644
--- a/ui/src/components/header/QasHeader.vue
+++ b/ui/src/components/header/QasHeader.vue
@@ -2,7 +2,15 @@
   <div class="justify-between no-wrap q-col-gutter-x-md row" :class="containerClass">
     <div :class="leftClass">
       <slot name="left">
-        <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
+        <div class="items-center q-col-gutter-sm row" :class="labelSectionClasses">
+          <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
+
+          <div class="col-auto items-center q-col-gutter-sm row">
+            <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
+              <qas-badge v-bind="badge" />
+            </div>
+          </div>
+        </div>
 
         <span v-if="props.description" class="text-body1 text-grey-8">
           {{ props.description }}
@@ -41,6 +49,11 @@ const props = defineProps({
     validator: value => Object.values(FlexAlign).includes(value)
   },
 
+  badges: {
+    type: Array,
+    default: () => []
+  },
+
   buttonProps: {
     default: () => ({}),
     type: Object
@@ -74,13 +87,20 @@ const leftClass = computed(() => {
   }
 })
 
+const labelSectionClasses = computed(() => {
+  return {
+    'q-mb-xs': hasBadges.value
+  }
+})
+
 const defaultLabelProps = computed(() => {
   return {
-    margin: 'xs',
+    margin: hasBadges.value ? 'none' : 'xs',
     ...props.labelProps
   }
 })
 
+const hasBadges = computed(() => !!props.badges.length)
 const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
 const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
diff --git a/ui/src/components/header/QasHeader.yml b/ui/src/components/header/QasHeader.yml
index ddccd04d9..01f653296 100644
--- a/ui/src/components/header/QasHeader.yml
+++ b/ui/src/components/header/QasHeader.yml
@@ -15,6 +15,11 @@ props:
     type: String
     examples: [start, center, end, between, around]
 
+  badges:
+    desc: Adiciona badges ao lado do titulo (QasLabel), caso não tenha titulo fica somente as bages acima da descrição.
+    default: []
+    type: Array
+
   button-props:
     desc: Propriedades do QasBtn.
     default: {}
@@ -24,6 +29,11 @@ props:
     desc: Descrição da seção a esquerda.
     type: String
 
+  label-props:
+    desc: Propriedades repassadas para o componente QasLabel.
+    type: Object
+    default: {}
+
   spacing:
     desc: Espaçamento entre o componente e o conteúdo abaixo.
     default: xl
diff --git a/ui/src/components/input/QasInput.yml b/ui/src/components/input/QasInput.yml
index 3651b6cac..3d270a16d 100644
--- a/ui/src/components/input/QasInput.yml
+++ b/ui/src/components/input/QasInput.yml
@@ -15,6 +15,16 @@ props:
     desc: Controla cor da borda do input.
     type: Boolean
 
+  icon:
+    desc: Ícone a esquerda.
+    type: String
+    default: ''
+
+  icon-right:
+    desc: Ícone a direita.
+    type: String
+    default: ''
+
   mask:
     desc: Máscara do input, é possível passar um slug de mascara ou um pattern personalizado.
     type: String
diff --git a/ui/src/components/numeric-input/QasNumericInput.yml b/ui/src/components/numeric-input/QasNumericInput.yml
index 42d7ec717..ecc8a009b 100644
--- a/ui/src/components/numeric-input/QasNumericInput.yml
+++ b/ui/src/components/numeric-input/QasNumericInput.yml
@@ -12,6 +12,16 @@ props:
     default: {}
     type: Object
 
+  icon:
+    desc: Ícone a esquerda.
+    type: String
+    default: ''
+
+  icon-right:
+    desc: Ícone a direita.
+    type: String
+    default: ''
+
   places:
     desc: Quantidade de casas decimais.
     default: 2
diff --git a/ui/src/components/select/QasSelect.vue b/ui/src/components/select/QasSelect.vue
index 6ed68abb1..95a47832c 100644
--- a/ui/src/components/select/QasSelect.vue
+++ b/ui/src/components/select/QasSelect.vue
@@ -28,21 +28,6 @@
           {{ opt.label }}
         </div>
       </qas-badge>
-      <!-- <q-chip
-        color="light-blue-2"
-        dense
-        :disable="isDisabled"
-        icon-remove="sym_r_close"
-        removable
-        square
-        :tabindex
-        text-color="black"
-        @remove="removeAtIndex(index)"
-      >
-        <div class="ellipsis" :title="opt.label">
-          {{ opt.label }}
-        </div>
-      </q-chip> -->
     </template>
 
     <template v-for="(_, name) in $slots" #[name]="context">
@@ -211,7 +196,6 @@ export default {
 
     // redesign
     componentClass () {
-      console.log('TCL: componentClass -> this.isSearchable || this.hasAppend', this.isSearchable || this.hasAppend)
       return {
         'qas-select--has-icon': this.isSearchable || this.hasAppend,
         'qas-select--closed': !this.isPopupContentOpen,

From e4626531db6726a98c4deeccb2f188308459662b Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Wed, 7 Aug 2024 10:35:33 -0300
Subject: [PATCH 11/22] feat: Update import path for QasChartView component

---
 app-extension/src/boot/chart-view.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app-extension/src/boot/chart-view.js b/app-extension/src/boot/chart-view.js
index d6ac1844b..7595dbc01 100644
--- a/app-extension/src/boot/chart-view.js
+++ b/app-extension/src/boot/chart-view.js
@@ -3,9 +3,7 @@ import thirdPartyComponentHandler from '@bildvitta/quasar-ui-asteroid/src/vue-pl
 export default async ({ app }) => {
   const thirdParty = thirdPartyComponentHandler({
     name: 'QasChartView',
-    // TODO: Voltar código comentado antes de publicar
-    importFn: () => import('../../../ui/src/components/chart-view/QasChartView.vue')
-    // importFn: () => import('@bildvitta/quasar-ui-asteroid/src/components/chart-view/QasChartView.vue')
+    importFn: () => import('@bildvitta/quasar-ui-asteroid/src/components/chart-view/QasChartView.vue')
   })
 
   thirdParty.initializeComponent({ app })

From dca49b960cef15331dacd7633ee6f7ee9ea82eef Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Wed, 7 Aug 2024 17:13:35 -0300
Subject: [PATCH 12/22] Changes for PR

---
 CHANGELOG.md                                  |  3 +++
 REDESIGN-NEXT-STEPS.md                        |  3 +++
 .../QasTabsGenerator/ExWithCounter.vue        |  2 +-
 docs/src/examples/QasToggle/Basic.vue         |  4 +---
 .../filters/private/PvFiltersButton.vue       |  3 ++-
 .../form-generator/QasFormGenerator.vue       | 22 ++++++++++++++-----
 .../numeric-input/QasNumericInput.vue         |  2 +-
 .../tabs-generator/QasTabsGenerator.vue       |  4 +++-
 8 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 REDESIGN-NEXT-STEPS.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0e21cc70..0127b9d26 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
   - Remover TODOS `QChip` de slot do `QasSelect`.
   - Caso esteja usando `QChip` (fora do QasSelect) substituir o uso pelo `QasBadge` com a prop `removable`.
   - Atentar-se para possíveis breaking changes nos inputs: `QasToggle`, `QasCheckbox`, e `QasRadio`, validar nos formulários dos produtos.
+  - Verificar todos os lugares que estão usando contadores no `QasTabsGenerator` se não estão tratando ele antes de passar.
 
 - `QasHeaderActions/QasHeader`:
   - renomeado para `QasHeader`.
@@ -29,6 +30,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasInput`: adicionado contado no type`textarea`, então caso exista lugares com contadores de caracteres, é necessário remover para não duplicar.
 - `QasCheckboxGroup/QasCheckbox`: renomeado para `QasCheckbox`.
 - `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
+- - `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid, então caso esteja tratando esse valor por fora, remover.
 
 ### Adicionado
 - `QasRadio`: adicionado novo componente.
@@ -56,6 +58,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasSearchInput`: alterado layout.
 - `QasField`: alterações para layout e novos componentes.
 - `QasHeaderActions/QasHeader`: alterado propriedade `text` para `description`.
+- `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid.
 
 - adicionado placeholder padrão:
   - `QasDatetimeInput`.
diff --git a/REDESIGN-NEXT-STEPS.md b/REDESIGN-NEXT-STEPS.md
new file mode 100644
index 000000000..65f373b33
--- /dev/null
+++ b/REDESIGN-NEXT-STEPS.md
@@ -0,0 +1,3 @@
+- [] Possibilidade de variação de tamanho de badges;
+- [] Possibilidade de variação de tamanho de ícone nos botões;
+- 
diff --git a/docs/src/examples/QasTabsGenerator/ExWithCounter.vue b/docs/src/examples/QasTabsGenerator/ExWithCounter.vue
index 7809ba4c9..76d2439b7 100644
--- a/docs/src/examples/QasTabsGenerator/ExWithCounter.vue
+++ b/docs/src/examples/QasTabsGenerator/ExWithCounter.vue
@@ -25,7 +25,7 @@ export default {
           label: 'Tab 1',
           value: 'tab1',
           icon: 'sym_r_person',
-          counter: 10
+          counter: 100000
         },
         {
           label: 'Tab 2',
diff --git a/docs/src/examples/QasToggle/Basic.vue b/docs/src/examples/QasToggle/Basic.vue
index c7577cc81..924db135f 100644
--- a/docs/src/examples/QasToggle/Basic.vue
+++ b/docs/src/examples/QasToggle/Basic.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-chip>
-      Eai
-    </qas-chip>
+    <qas-toggle label="Aceitar" :model-value="false" />
   </div>
 </template>
 
diff --git a/ui/src/components/filters/private/PvFiltersButton.vue b/ui/src/components/filters/private/PvFiltersButton.vue
index ea413ac0a..d25b789c8 100644
--- a/ui/src/components/filters/private/PvFiltersButton.vue
+++ b/ui/src/components/filters/private/PvFiltersButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <qas-btn data-cy="filters-btn" icon="sym_r_filter_alt" label="Filtrar" variant="tertiary">
+  <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">
       <div v-if="loading" class="q-pa-xl text-center">
         <q-spinner color="grey" size="2em" />
@@ -18,6 +18,7 @@
           <template #primary>
             <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" type="submit" variant="primary" />
           </template>
+
           <template #secondary>
             <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" variant="secondary" @click="$emit('clear')" />
           </template>
diff --git a/ui/src/components/form-generator/QasFormGenerator.vue b/ui/src/components/form-generator/QasFormGenerator.vue
index 8aee22713..759a256d9 100644
--- a/ui/src/components/form-generator/QasFormGenerator.vue
+++ b/ui/src/components/form-generator/QasFormGenerator.vue
@@ -32,7 +32,7 @@
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { Spacing } from '../../enums/Spacing'
-import { computed } from 'vue'
+import { computed, provide, inject } from 'vue'
 
 defineOptions({ name: 'QasFormGenerator' })
 
@@ -81,24 +81,36 @@ const props = defineProps({
   },
 
   useBox: {
-    type: Boolean
+    type: Boolean,
+    default: true
   }
 })
 
 const emit = defineEmits(['update:modelValue'])
 
+provide('isFormGenerator', true)
+
 // composables
 const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
-console.log('TCL: _getBreakpoint', getFieldSetColumnClass(undefined))
 
 const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
+// constants
+const hasNestedFormGenerator = inject('isFormGenerator', false)
+
 // computed
+
+/**
+ * Se o QasFormGenerator tiver um elemento acima que também é um QasFormGenerator,
+ * mesmo que a propriedade useBox seja true, o componente não deve renderizar o box.
+ */
 const containerComponent = computed(() => {
+  const hasBox = props.useBox && !hasNestedFormGenerator
+
   return {
-    is: props.useBox ? 'qas-box' : 'div',
+    is: hasBox ? 'qas-box' : 'div',
     props: {
-      ...(props.useBox && { ...props.boxProps })
+      ...(hasBox && { ...props.boxProps })
     }
   }
 })
diff --git a/ui/src/components/numeric-input/QasNumericInput.vue b/ui/src/components/numeric-input/QasNumericInput.vue
index efc36a9c8..355122b36 100644
--- a/ui/src/components/numeric-input/QasNumericInput.vue
+++ b/ui/src/components/numeric-input/QasNumericInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-field class="qas-numeric-input" :class="classes" dense :label="formattedLabel" :model-value="modelValue">
+  <q-field class="qas-numeric-input" :class="classes" dense :label="formattedLabel" :model-value="modelValue" no-error-icon>
     <template #control="{ floatingLabel, id, editable }">
       <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :disabled="!editable" inputmode="numeric" :placeholder @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
diff --git a/ui/src/components/tabs-generator/QasTabsGenerator.vue b/ui/src/components/tabs-generator/QasTabsGenerator.vue
index fa8e06d1a..4a6912b57 100644
--- a/ui/src/components/tabs-generator/QasTabsGenerator.vue
+++ b/ui/src/components/tabs-generator/QasTabsGenerator.vue
@@ -21,6 +21,8 @@
 <script setup>
 import QasStatus from '../status/QasStatus.vue'
 
+import { decimal } from '../../helpers'
+
 import { computed } from 'vue'
 import { extend } from 'quasar'
 
@@ -87,7 +89,7 @@ function getFormattedLabel ({ label, counter, value }) {
 
   if (!normalizedCount) return label
 
-  const countString = String(normalizedCount)
+  const countString = String(decimal(normalizedCount))
 
   return `${label} (${countString.padStart(2, '0')})`
 }

From 706db88965b9a0ef67ad6e86e77c2f73f5468369 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Wed, 7 Aug 2024 22:35:06 -0300
Subject: [PATCH 13/22] chore: Remove deprecated QasPageHeader properties

---
 CHANGELOG.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0127b9d26..54e2f389c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,7 +30,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasInput`: adicionado contado no type`textarea`, então caso exista lugares com contadores de caracteres, é necessário remover para não duplicar.
 - `QasCheckboxGroup/QasCheckbox`: renomeado para `QasCheckbox`.
 - `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
-- - `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid, então caso esteja tratando esse valor por fora, remover.
+- `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid, então caso esteja tratando esse valor por fora, remover.
 
 ### Adicionado
 - `QasRadio`: adicionado novo componente.
@@ -73,6 +73,10 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
   - renomeado para `QasCheckbox`.
   - agora quando não é passado `options` o componente opera em modo "single".
 
+### Removido
+- `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
+- `QasHeaderActions/QasHeader`: alterado propriedade `text` para `description`.
+
 ## [3.16.0-beta.10] - 01-08-2024
 ## BREAKING CHANGES
 - `QasSingleView`: Possível breaking change ao utilizar o `before-fetch`.

From bcc7ca000478f3b2f410cc83695bccf555a3b40e Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Thu, 8 Aug 2024 15:01:58 -0300
Subject: [PATCH 14/22] wip

---
 CHANGELOG.md                                  |  3 +-
 REDESIGN-NEXT-STEPS.md                        |  1 -
 .../examples/QasFormGenerator/Fieldset.vue    | 33 ++++++++++++++-
 docs/src/examples/QasGridGenerator/Slots.vue  | 27 +++++++++++-
 ui/src/components/badge/QasBadge.vue          |  6 ++-
 .../form-generator/QasFormGenerator.vue       | 25 +++++------
 .../form-generator/QasFormGenerator.yml       | 13 +++++-
 .../grid-generator/QasGridGenerator.vue       | 42 ++++++++++++++-----
 .../grid-generator/QasGridGenerator.yml       | 20 ++++++++-
 ui/src/components/grid-generator/QasItem.vue  | 31 ++++++++++++++
 10 files changed, 167 insertions(+), 34 deletions(-)
 create mode 100644 ui/src/components/grid-generator/QasItem.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54e2f389c..6be4d9e38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,7 +40,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasHeaderActions/QasHeader`: adicionado novas propriedades `labelProps` e `badges`.
 - `QasInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
 - `QasNumericInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
-
+- `QasGridGenerator`: adicionado 2 novos slots, `content-field-[nome-da-chave]` e `header-field-[nome-da-chave]`.
 - `QasFormGenerator`:
   - adicionado recurso no fieldset para dividir colunas entre eles.
   - adicionado novas propriedades `useBox` e `boxProps`.
@@ -59,6 +59,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasField`: alterações para layout e novos componentes.
 - `QasHeaderActions/QasHeader`: alterado propriedade `text` para `description`.
 - `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid.
+- `QasBadge`: modificado altura minima de 24px para para 20px e espaçamento vertical de 4px para 2px.
 
 - adicionado placeholder padrão:
   - `QasDatetimeInput`.
diff --git a/REDESIGN-NEXT-STEPS.md b/REDESIGN-NEXT-STEPS.md
index 65f373b33..d0d06dd2e 100644
--- a/REDESIGN-NEXT-STEPS.md
+++ b/REDESIGN-NEXT-STEPS.md
@@ -1,3 +1,2 @@
-- [] Possibilidade de variação de tamanho de badges;
 - [] Possibilidade de variação de tamanho de ícone nos botões;
 - 
diff --git a/docs/src/examples/QasFormGenerator/Fieldset.vue b/docs/src/examples/QasFormGenerator/Fieldset.vue
index cbd39b206..bfc80e844 100644
--- a/docs/src/examples/QasFormGenerator/Fieldset.vue
+++ b/docs/src/examples/QasFormGenerator/Fieldset.vue
@@ -39,12 +39,19 @@ export default {
           label: 'Informações pessoais',
           description: 'Informe o nome e email do usuário.',
           fields: ['isActive', 'name', 'email'],
+          column: '12'
+        },
+
+        address: {
+          label: 'Endereço',
+          description: 'Informe o endereço, cidade, estado e país do usuário.',
+          fields: ['address', 'city', 'state', 'country'],
           column: { col: 12, sm: 6 }
         },
 
         another: {
           label: 'Outras informações',
-          description: 'Informe a empresa, telefone e documento do usuário.',
+          description: 'Informe o documento do usuário.',
           fields: ['phone', 'company'],
           column: { col: 12, sm: 6 }
         }
@@ -109,6 +116,30 @@ export default {
           label: 'Telefone',
           type: 'string',
           mask: 'phone'
+        },
+
+        address: {
+          name: 'address',
+          label: 'Endereço',
+          type: 'string'
+        },
+
+        city: {
+          name: 'city',
+          label: 'Cidade',
+          type: 'string'
+        },
+
+        state: {
+          name: 'state',
+          label: 'Estado',
+          type: 'string'
+        },
+
+        country: {
+          name: 'country',
+          label: 'País',
+          type: 'string'
         }
       }
     }
diff --git a/docs/src/examples/QasGridGenerator/Slots.vue b/docs/src/examples/QasGridGenerator/Slots.vue
index 3e387d1f5..e7074a25e 100644
--- a/docs/src/examples/QasGridGenerator/Slots.vue
+++ b/docs/src/examples/QasGridGenerator/Slots.vue
@@ -3,12 +3,35 @@
   <qas-single-view v-model:fields="fields" v-model:result="result" :custom-id="customId" :entity="entity">
     <template #default>
       <div>
-        field-[nome-da-chave]:
         <qas-grid-generator :fields="fields" :result="result">
-          <template #field-name="{ field }">
+          <!-- <template #field-name="{ field }">
             <div>
               name: <pre>{{ field }}</pre>
             </div>
+          </template> -->
+
+          <template #header-field-name="{ field }">
+            <div>
+              <pre>{{ field }}</pre>
+            </div>
+          </template>
+
+          <template #header>
+            <div>
+              header 2
+            </div>
+          </template>
+
+          <template #content-field-name>
+            <div>
+              content
+            </div>
+          </template>
+
+          <template #content>
+            <div>
+              content 2
+            </div>
           </template>
         </qas-grid-generator>
       </div>
diff --git a/ui/src/components/badge/QasBadge.vue b/ui/src/components/badge/QasBadge.vue
index c76c6408f..56a02ec12 100644
--- a/ui/src/components/badge/QasBadge.vue
+++ b/ui/src/components/badge/QasBadge.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="component.is" v-bind="component.props" class="q-px-sm q-py-xs qas-badge text-caption">
+  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-caption">
     <slot />
   </component>
 </template>
@@ -80,6 +80,8 @@ const component = computed(() => {
 
 <style lang="scss">
 .qas-badge {
-  min-height: 24px;
+  min-height: 20px;
+  padding-bottom: 2px;
+  padding-top: 2px;
 }
 </style>
diff --git a/ui/src/components/form-generator/QasFormGenerator.vue b/ui/src/components/form-generator/QasFormGenerator.vue
index 759a256d9..148a84844 100644
--- a/ui/src/components/form-generator/QasFormGenerator.vue
+++ b/ui/src/components/form-generator/QasFormGenerator.vue
@@ -9,19 +9,21 @@
         </slot>
 
         <div>
-          <div :class="classes">
-            <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
+          <slot :fields="fieldsetItem.fields?.visible" :name="`legend-section-${fieldsetItemKey}`">
+            <div :class="classes">
+              <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
+                <slot :field="field" :name="`field-${field.name}`">
+                  <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+                </slot>
+              </div>
+            </div>
+
+            <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
               <slot :field="field" :name="`field-${field.name}`">
-                <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+                <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
               </slot>
             </div>
-          </div>
-
-          <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
-            <slot :field="field" :name="`field-${field.name}`">
-              <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
-            </slot>
-          </div>
+          </slot>
         </div>
       </component>
     </div>
@@ -81,8 +83,7 @@ const props = defineProps({
   },
 
   useBox: {
-    type: Boolean,
-    default: true
+    type: Boolean
   }
 })
 
diff --git a/ui/src/components/form-generator/QasFormGenerator.yml b/ui/src/components/form-generator/QasFormGenerator.yml
index a1a8f6c8a..9d4f2f981 100644
--- a/ui/src/components/form-generator/QasFormGenerator.yml
+++ b/ui/src/components/form-generator/QasFormGenerator.yml
@@ -85,8 +85,17 @@ slots:
         desc: Payload do campo atual.
         default: {}
         type: Object
-'legend-[nome-da-chave]':
-    desc: Acessa o slot de um rótulo (label).
+
+  'legend-[nome-da-chave]':
+      desc: Acessa o slot de um rótulo (label).
+
+  'legend-section-[nome-da-chave]':
+    desc: Acessa o slot da seção de fields daquele fieldset.
+    scope:
+      fields:
+        desc: Campos daquela seção.
+        default: {}
+        type: Object
 
 events:
   '@update:model-value -> function(value)':
diff --git a/ui/src/components/grid-generator/QasGridGenerator.vue b/ui/src/components/grid-generator/QasGridGenerator.vue
index d07273989..f6107531f 100644
--- a/ui/src/components/grid-generator/QasGridGenerator.vue
+++ b/ui/src/components/grid-generator/QasGridGenerator.vue
@@ -2,23 +2,43 @@
   <div :class="classes">
     <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="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
-            {{ field.label }}
-          </header>
-        </slot>
-
-        <slot :field="field" name="content">
-          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-            {{ field.formattedResult }}
-          </div>
-        </slot>
+        <qas-item>
+          <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>
+              </slot>
+            </slot>
+          </template>
+
+          <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')">
+                  {{ field.formattedResult }}
+                </div>
+              </slot>
+            </slot>
+          </template>
+        </qas-item>
+
+        <!-- <slot :field="field" :name="`content-field-${field.name}`">
+          <slot :field="field" name="content">
+            <div class="text-body1 text-grey-10" :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+              {{ field.formattedResult }}
+            </div>
+          </slot>
+        </slot> -->
       </slot>
     </div>
   </div>
 </template>
 
 <script setup>
+import QasItem from './QasItem.vue'
+
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { isEmpty, humanize } from '../../helpers'
 import { useScreen } from '../../composables'
diff --git a/ui/src/components/grid-generator/QasGridGenerator.yml b/ui/src/components/grid-generator/QasGridGenerator.yml
index 810a6aad5..60452746b 100644
--- a/ui/src/components/grid-generator/QasGridGenerator.yml
+++ b/ui/src/components/grid-generator/QasGridGenerator.yml
@@ -63,7 +63,7 @@ props:
 
 slots:
   content:
-    desc: Slot para o conteúdo (content).
+    desc: Slot para o conteúdo (valor) de todas os campos de uma vez.
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
@@ -79,7 +79,23 @@ slots:
         type: Object
 
   header:
-    desc: Slot para o header.
+    desc: Slot para o header de todas os campos de uma vez.
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object
+
+  'header-field-[nome-da-chave]':
+    desc: Slot para o header especifico de um field.
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object
+
+  'content-field-[nome-da-chave]':
+    desc: Slot para o conteúdo (valor) especifico de um field.
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
diff --git a/ui/src/components/grid-generator/QasItem.vue b/ui/src/components/grid-generator/QasItem.vue
new file mode 100644
index 000000000..fe9b0091e
--- /dev/null
+++ b/ui/src/components/grid-generator/QasItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <header class="text-caption">
+      <slot name="header">
+        {{ props.label }}
+      </slot>
+    </header>
+
+    <div class="text-body1 text-grey-10">
+      <slot name="content">
+        {{ props.value }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'QasItem' })
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+
+  value: {
+    type: [String, Number, Boolean],
+    default: ''
+  }
+})
+</script>

From 1513ac0eeb523bb371991e657344af1017dd9d50 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Fri, 9 Aug 2024 11:21:28 -0300
Subject: [PATCH 15/22] feat: Add QasGridItem component and update
 QasGridGenerator

---
 CHANGELOG.md                                  | 11 +++
 docs/src/assets/menu.js                       |  4 +
 docs/src/examples/QasGridGenerator/Basic.vue  |  2 +-
 docs/src/examples/QasGridGenerator/Slots.vue  | 30 +------
 .../examples/QasGridGenerator/UseInline.vue   |  8 +-
 docs/src/examples/QasGridItem/Basic.vue       |  5 ++
 docs/src/examples/QasGridItem/UseEllipsis.vue |  9 ++
 docs/src/examples/QasGridItem/UseInline.vue   |  5 ++
 docs/src/pages/components/grid-generator.md   |  3 +-
 docs/src/pages/components/grid-item.md        | 16 ++++
 .../grid-generator/QasGridGenerator.vue       | 17 +---
 ui/src/components/grid-generator/QasItem.vue  | 31 -------
 ui/src/components/grid-item/QasGridItem.vue   | 89 +++++++++++++++++++
 ui/src/components/grid-item/QasGridItem.yml   | 22 +++++
 ui/src/vue-plugin.js                          |  3 +
 15 files changed, 179 insertions(+), 76 deletions(-)
 create mode 100644 docs/src/examples/QasGridItem/Basic.vue
 create mode 100644 docs/src/examples/QasGridItem/UseEllipsis.vue
 create mode 100644 docs/src/examples/QasGridItem/UseInline.vue
 create mode 100644 docs/src/pages/components/grid-item.md
 delete mode 100644 ui/src/components/grid-generator/QasItem.vue
 create mode 100644 ui/src/components/grid-item/QasGridItem.vue
 create mode 100644 ui/src/components/grid-item/QasGridItem.yml

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6be4d9e38..8d69a0423 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,11 +22,16 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
   - Caso esteja usando `QChip` (fora do QasSelect) substituir o uso pelo `QasBadge` com a prop `removable`.
   - Atentar-se para possíveis breaking changes nos inputs: `QasToggle`, `QasCheckbox`, e `QasRadio`, validar nos formulários dos produtos.
   - Verificar todos os lugares que estão usando contadores no `QasTabsGenerator` se não estão tratando ele antes de passar.
+  - Verificar todos os lugares que utilizam `QasGridGenerator` para possíveis breaking changes de estilos.
 
 - `QasHeaderActions/QasHeader`:
   - renomeado para `QasHeader`.
   - alterado propriedade `text` para `description`.
 
+- `QasGridGenerator`:
+  - modificado tipografia;
+  - utilizando novo componente `QasGridItem`.
+
 - `QasInput`: adicionado contado no type`textarea`, então caso exista lugares com contadores de caracteres, é necessário remover para não duplicar.
 - `QasCheckboxGroup/QasCheckbox`: renomeado para `QasCheckbox`.
 - `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
@@ -35,12 +40,14 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 ### Adicionado
 - `QasRadio`: adicionado novo componente.
 - `QasToggle`: adicionado novo componente.
+- `QasGridItem`: adicionado novo componente.
 - `QasNestedFields`: adicionado nova propriedade `useBox`.
 - `QasBox`: adicionado nova propriedade `useSpacing`.
 - `QasHeaderActions/QasHeader`: adicionado novas propriedades `labelProps` e `badges`.
 - `QasInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
 - `QasNumericInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
 - `QasGridGenerator`: adicionado 2 novos slots, `content-field-[nome-da-chave]` e `header-field-[nome-da-chave]`.
+
 - `QasFormGenerator`:
   - adicionado recurso no fieldset para dividir colunas entre eles.
   - adicionado novas propriedades `useBox` e `boxProps`.
@@ -61,6 +68,10 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid.
 - `QasBadge`: modificado altura minima de 24px para para 20px e espaçamento vertical de 4px para 2px.
 
+- `QasGridGenerator`:
+  - modificado tipografia;
+  - utilizando novo componente `QasGridItem`.
+
 - adicionado placeholder padrão:
   - `QasDatetimeInput`.
   - `QasInput`.
diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
index c2f8eadec..b39007ea4 100644
--- a/docs/src/assets/menu.js
+++ b/docs/src/assets/menu.js
@@ -183,6 +183,10 @@ module.exports = [
         name: 'GridGenerator',
         path: '/components/grid-generator'
       },
+      {
+        name: 'GridItem',
+        path: '/components/grid-item'
+      },
       {
         name: 'Header',
         path: '/components/header'
diff --git a/docs/src/examples/QasGridGenerator/Basic.vue b/docs/src/examples/QasGridGenerator/Basic.vue
index 213919a68..b55008f00 100644
--- a/docs/src/examples/QasGridGenerator/Basic.vue
+++ b/docs/src/examples/QasGridGenerator/Basic.vue
@@ -3,7 +3,7 @@
   <qas-single-view v-model:fields="fields" v-model:result="result" :custom-id="customId" :entity="entity">
     <template #default>
       <div>
-        <qas-grid-generator :columns="{ name: { col: 12 } }" :fields="fields" :result="result" />
+        <qas-grid-generator :fields="fields" :result="result" />
       </div>
     </template>
   </qas-single-view>
diff --git a/docs/src/examples/QasGridGenerator/Slots.vue b/docs/src/examples/QasGridGenerator/Slots.vue
index e7074a25e..c822b6b36 100644
--- a/docs/src/examples/QasGridGenerator/Slots.vue
+++ b/docs/src/examples/QasGridGenerator/Slots.vue
@@ -4,34 +4,8 @@
     <template #default>
       <div>
         <qas-grid-generator :fields="fields" :result="result">
-          <!-- <template #field-name="{ field }">
-            <div>
-              name: <pre>{{ field }}</pre>
-            </div>
-          </template> -->
-
-          <template #header-field-name="{ field }">
-            <div>
-              <pre>{{ field }}</pre>
-            </div>
-          </template>
-
-          <template #header>
-            <div>
-              header 2
-            </div>
-          </template>
-
-          <template #content-field-name>
-            <div>
-              content
-            </div>
-          </template>
-
-          <template #content>
-            <div>
-              content 2
-            </div>
+          <template #field-name="{ field }">
+            <qas-grid-item :label="field.label" :value="field.formattedResult" />
           </template>
         </qas-grid-generator>
       </div>
diff --git a/docs/src/examples/QasGridGenerator/UseInline.vue b/docs/src/examples/QasGridGenerator/UseInline.vue
index d7dc7cbdf..03ea9fe22 100644
--- a/docs/src/examples/QasGridGenerator/UseInline.vue
+++ b/docs/src/examples/QasGridGenerator/UseInline.vue
@@ -2,7 +2,13 @@
   <!-- 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 />
+      <qas-grid-generator :fields="fields" :result="result" use-inline>
+        <!-- <template #content-field-phone>
+          <div class="text-h4">
+            eae
+          </div>
+        </template> -->
+      </qas-grid-generator>
     </template>
   </qas-single-view>
 </template>
diff --git a/docs/src/examples/QasGridItem/Basic.vue b/docs/src/examples/QasGridItem/Basic.vue
new file mode 100644
index 000000000..57b2c0230
--- /dev/null
+++ b/docs/src/examples/QasGridItem/Basic.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="container q-py-lg">
+    <qas-grid-item label="Nome" value="John doe" />
+  </div>
+</template>
diff --git a/docs/src/examples/QasGridItem/UseEllipsis.vue b/docs/src/examples/QasGridItem/UseEllipsis.vue
new file mode 100644
index 000000000..bea6a7f1d
--- /dev/null
+++ b/docs/src/examples/QasGridItem/UseEllipsis.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="container q-py-lg">
+    <qas-grid-item label="Informações" value="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere illo omnis voluptatibus maxime corrupti adipisci magni tempore, repellat libero aperiam atque? Eveniet nihil ea non officiis natus aut doloribus eius." />
+
+    <q-separator class="q-my-md" />
+
+    <qas-grid-item label="Informações" use-inline value="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere illo omnis voluptatibus maxime corrupti adipisci magni tempore, repellat libero aperiam atque? Eveniet nihil ea non officiis natus aut doloribus eius." />
+  </div>
+</template>
diff --git a/docs/src/examples/QasGridItem/UseInline.vue b/docs/src/examples/QasGridItem/UseInline.vue
new file mode 100644
index 000000000..f2cda9932
--- /dev/null
+++ b/docs/src/examples/QasGridItem/UseInline.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="container q-py-lg">
+    <qas-grid-item label="Nome" use-inline value="John doe" />
+  </div>
+</template>
diff --git a/docs/src/pages/components/grid-generator.md b/docs/src/pages/components/grid-generator.md
index c418c645f..5cfb462cb 100644
--- a/docs/src/pages/components/grid-generator.md
+++ b/docs/src/pages/components/grid-generator.md
@@ -15,7 +15,8 @@ Caso os breakpoints dos campos sejam todos iguais, exemplo:
 :::
 
 :::info
-Ao utilizar a prop `useInline`, o gutter passa a ter o valor `md`.
+- Ao utilizar a prop `useInline`, o gutter passa a ter o valor `md`.
+- Ao abrir slots `field-[nome-da-chave]` tente utilizar o componente `QasGridItem`.
 :::
 
 ## Uso
diff --git a/docs/src/pages/components/grid-item.md b/docs/src/pages/components/grid-item.md
new file mode 100644
index 000000000..28af537dd
--- /dev/null
+++ b/docs/src/pages/components/grid-item.md
@@ -0,0 +1,16 @@
+---
+title: QasGridItem
+---
+
+Componente para renderizar chave/valor comumente utilizado junto ao QasGridGenerator.
+
+<doc-api file="grid-item/QasGridItem" name="QasGridItem" />
+
+:::info
+Recomendamos o uso deste componente sempre que utilizar o slot `field-[nome-da-chave]` no componente `QasGridGenerator`.
+:::
+
+## Uso
+<doc-example file="QasGridItem/Basic" title="Básico" />
+<doc-example file="QasGridItem/UseInline" title="Inline" />
+<doc-example file="QasGridItem/UseEllipsis" title="Ellipsis" />
diff --git a/ui/src/components/grid-generator/QasGridGenerator.vue b/ui/src/components/grid-generator/QasGridGenerator.vue
index f6107531f..812ddac6d 100644
--- a/ui/src/components/grid-generator/QasGridGenerator.vue
+++ b/ui/src/components/grid-generator/QasGridGenerator.vue
@@ -2,7 +2,7 @@
   <div :class="classes">
     <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
       <slot :field="field" :name="`field-${field.name}`">
-        <qas-item>
+        <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
           <template #header>
             <slot :field="field" :name="`header-field-${field.name}`">
               <slot :field="field" name="header">
@@ -22,23 +22,13 @@
               </slot>
             </slot>
           </template>
-        </qas-item>
-
-        <!-- <slot :field="field" :name="`content-field-${field.name}`">
-          <slot :field="field" name="content">
-            <div class="text-body1 text-grey-10" :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-              {{ field.formattedResult }}
-            </div>
-          </slot>
-        </slot> -->
+        </qas-grid-item>
       </slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import QasItem from './QasItem.vue'
-
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { isEmpty, humanize } from '../../helpers'
 import { useScreen } from '../../composables'
@@ -111,8 +101,7 @@ const headerClass = computed(() => {
     props.headerClass,
 
     {
-      ellipsis: !screen.isSmall && props.useEllipsis,
-      'text-bold': screen.isSmall || !props.useInline
+      ellipsis: !screen.isSmall && props.useEllipsis
     }
   ]
 })
diff --git a/ui/src/components/grid-generator/QasItem.vue b/ui/src/components/grid-generator/QasItem.vue
deleted file mode 100644
index fe9b0091e..000000000
--- a/ui/src/components/grid-generator/QasItem.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <header class="text-caption">
-      <slot name="header">
-        {{ props.label }}
-      </slot>
-    </header>
-
-    <div class="text-body1 text-grey-10">
-      <slot name="content">
-        {{ props.value }}
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name: 'QasItem' })
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: ''
-  },
-
-  value: {
-    type: [String, Number, Boolean],
-    default: ''
-  }
-})
-</script>
diff --git a/ui/src/components/grid-item/QasGridItem.vue b/ui/src/components/grid-item/QasGridItem.vue
new file mode 100644
index 000000000..7b4e4cd9c
--- /dev/null
+++ b/ui/src/components/grid-item/QasGridItem.vue
@@ -0,0 +1,89 @@
+<template>
+  <div :class="classes.main">
+    <header v-bind="headerProps">
+      <slot name="header">
+        {{ props.label }}
+      </slot>
+    </header>
+
+    <div v-bind="contentProps">
+      <slot name="content">
+        {{ props.value }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useScreen } from '../../composables'
+
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasGridItem' })
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+
+  value: {
+    type: [String, Number, Boolean],
+    default: ''
+  },
+
+  useEllipsis: {
+    default: true,
+    type: Boolean
+  },
+
+  useInline: {
+    type: Boolean
+  }
+})
+
+const screen = useScreen()
+
+// computed
+const hasEllipsis = computed(() => props.useEllipsis && !screen.isSmall)
+
+const classes = computed(() => {
+  const isInline = props.useInline && !screen.isSmall
+
+  return {
+    main: {
+      flex: isInline,
+      'q-col-gutter-x-md': isInline,
+      'justify-between': isInline,
+      'col-12': isInline,
+      'no-wrap': isInline
+    },
+
+    header: {
+      'text-caption': !isInline,
+      'text-body1': isInline
+    },
+
+    content: {
+      'text-body1': !isInline,
+      'text-grey-10': !isInline,
+      'text-subtitle1': isInline,
+      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 })
+  }
+})
+</script>
diff --git a/ui/src/components/grid-item/QasGridItem.yml b/ui/src/components/grid-item/QasGridItem.yml
new file mode 100644
index 000000000..abc8efb79
--- /dev/null
+++ b/ui/src/components/grid-item/QasGridItem.yml
@@ -0,0 +1,22 @@
+type: component
+
+meta:
+  desc: Componente para renderizar chave/valor comumente utilizado junto ao QasGridGenerator.
+
+props:
+  label:
+    desc: Rótulo do header.
+    default: ''
+    type: String
+
+  value:
+    desc: Valor do conteúdo.
+    default: ''
+    type: [String, Number, Boolean]
+
+slots:
+  content:
+    desc: Slot para o conteúdo (value).
+
+  header:
+    desc: Slot para o header (label).
diff --git a/ui/src/vue-plugin.js b/ui/src/vue-plugin.js
index 7fe164306..a865c60be 100644
--- a/ui/src/vue-plugin.js
+++ b/ui/src/vue-plugin.js
@@ -32,6 +32,7 @@ import QasGallery from './components/gallery/QasGallery.vue'
 import QasGalleryCard from './components/gallery-card/QasGalleryCard.vue'
 import QasGrabbable from './components/grabbable/QasGrabbable.vue'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
+import QasGridItem from './components/grid-item/QasGridItem.vue'
 import QasHeader from './components/header/QasHeader.vue'
 import QasInfiniteScroll from './components/infinite-scroll/QasInfiniteScroll.vue'
 import QasInput from './components/input/QasInput.vue'
@@ -128,6 +129,7 @@ async function install (app) {
   app.component('QasGalleryCard', QasGalleryCard)
   app.component('QasGrabbable', QasGrabbable)
   app.component('QasGridGenerator', QasGridGenerator)
+  app.component('QasGridItem', QasGridItem)
   app.component('QasHeader', QasHeader)
   app.component('QasInfiniteScroll', QasInfiniteScroll)
   app.component('QasInput', QasInput)
@@ -226,6 +228,7 @@ export {
   QasGalleryCard,
   QasGrabbable,
   QasGridGenerator,
+  QasGridItem,
   QasHeader,
   QasInfiniteScroll,
   QasInput,

From 1869bbc52184e635f83fa7d138e90d18ed075213 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Fri, 9 Aug 2024 11:25:07 -0300
Subject: [PATCH 16/22] feat: Update QasGridGenerator and QasSelect components

---
 docs/src/examples/QasGridGenerator/UseInline.vue | 8 +-------
 docs/src/examples/QasSelect/Basic.vue            | 8 --------
 docs/src/pages/components/form-generator.md      | 8 +++-----
 3 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/docs/src/examples/QasGridGenerator/UseInline.vue b/docs/src/examples/QasGridGenerator/UseInline.vue
index 03ea9fe22..d7dc7cbdf 100644
--- a/docs/src/examples/QasGridGenerator/UseInline.vue
+++ b/docs/src/examples/QasGridGenerator/UseInline.vue
@@ -2,13 +2,7 @@
   <!-- 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 #content-field-phone>
-          <div class="text-h4">
-            eae
-          </div>
-        </template> -->
-      </qas-grid-generator>
+      <qas-grid-generator :fields="fields" :result="result" use-inline />
     </template>
   </qas-single-view>
 </template>
diff --git a/docs/src/examples/QasSelect/Basic.vue b/docs/src/examples/QasSelect/Basic.vue
index 0822bbc38..bc145e87c 100644
--- a/docs/src/examples/QasSelect/Basic.vue
+++ b/docs/src/examples/QasSelect/Basic.vue
@@ -2,12 +2,10 @@
   <div class="container q-col-gutter-sm q-py-lg row">
     <div class="col-6">
       <qas-select v-model="model" label="Meu select!" :options="options" />
-      <!-- Model: {{ model }} -->
     </div>
 
     <div class="col-6">
       <qas-select v-model="model2" label="Meu select multiple" multiple :options="options" />
-      <!-- Model múltiplo: {{ model2 }} -->
     </div>
   </div>
 </template>
@@ -86,12 +84,6 @@ export default {
         }
       ]
     }
-  },
-
-  created () {
-    setTimeout(() => {
-      this.model = 1
-    }, 2000)
   }
 }
 </script>
diff --git a/docs/src/pages/components/form-generator.md b/docs/src/pages/components/form-generator.md
index e22a079c0..a15381efd 100644
--- a/docs/src/pages/components/form-generator.md
+++ b/docs/src/pages/components/form-generator.md
@@ -41,8 +41,6 @@ Muitas vezes precisamos adicionar rótulos (label) e descrições (description)
 <doc-example file="QasFormGenerator/Fieldset" title="Agrupando fields por rótulo (label)" />
 
 Em alguns casos, queremos acessar todo o conteúdo de um campo especifico para fazer uma logica um pouco mais detalhada, neste caso conseguimos acessar o slot de cada campo individualmente.
-<!-- <doc-example file="QasFormGenerator/CustomSlot" title="Acessando slots" /> -->
-
-<!-- <doc-example file="QasFormGenerator/CustomProps" title="Custom props" /> -->
-
-<!-- <doc-example file="QasFormGenerator/ExFormCommonColumns" title="Common columns" /> -->
+<doc-example file="QasFormGenerator/CustomSlot" title="Acessando slots" />
+<doc-example file="QasFormGenerator/CustomProps" title="Custom props" />
+<doc-example file="QasFormGenerator/ExFormCommonColumns" title="Common columns" />

From cfa39b5c7b1154bbd69baa7c516afd0c70ebeafd Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Mon, 12 Aug 2024 15:27:01 -0300
Subject: [PATCH 17/22] feat: Add QasGalleryCard component and update QasHeader

---
 CHANGELOG.md                                  | 18 ++++-
 docs/src/examples/QasCard/Basic.vue           |  2 +-
 docs/src/examples/QasCard/Box.vue             | 69 +++++++++++++++++++
 docs/src/examples/QasGalleryCard/Box.vue      | 28 ++++++++
 .../examples/QasHeader/HeaderWithBadges.vue   |  5 ++
 .../examples/QasHeader/HeaderWithSlots.vue    | 12 ++--
 .../QasHeader/HeaderWithoutActions.vue        | 20 ++++++
 docs/src/pages/components/card.md             |  1 +
 docs/src/pages/components/gallery-card.md     |  1 +
 docs/src/pages/components/header.md           |  3 +-
 ui/src/components/box/QasBox.vue              | 21 +++++-
 ui/src/components/box/QasBox.yml              | 12 ++++
 ui/src/components/card/QasCard.vue            | 59 +++++++++-------
 .../gallery-card/QasGalleryCard.vue           | 13 +++-
 ui/src/components/header/QasHeader.vue        | 69 +++++++++----------
 ui/src/components/header/QasHeader.yml        | 19 +++--
 .../components/page-header/QasPageHeader.vue  |  2 +-
 17 files changed, 265 insertions(+), 89 deletions(-)
 create mode 100644 docs/src/examples/QasCard/Box.vue
 create mode 100644 docs/src/examples/QasGalleryCard/Box.vue
 create mode 100644 docs/src/examples/QasHeader/HeaderWithoutActions.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d69a0423..d1c852da8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
   - Substituir todos `QRadio` por `QasRadio`.
   - Substituir todos `QasCheckboxGroup` por `QasCheckbox`.
   - Substituir todos `QasHeaderActions` por `QasHeader`.
+  - Revisar todos os `QasHeaderActions/QasHeader` se atentando as mudanças principalmente referente aos slots e propriedade `alignColumns`.
   - Atentar-se para prop `headerActionsProps` no componente `QasPageHeader`.
   - Remover TODOS `QChip` de slot do `QasSelect`.
   - Caso esteja usando `QChip` (fora do QasSelect) substituir o uso pelo `QasBadge` com a prop `removable`.
@@ -27,6 +28,8 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasHeaderActions/QasHeader`:
   - renomeado para `QasHeader`.
   - alterado propriedade `text` para `description`.
+  - removido propriedade `alignColumns`.
+  - removido slots `right` e `left` em favor de utilizar novos slots.
 
 - `QasGridGenerator`:
   - modificado tipografia;
@@ -42,12 +45,15 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasToggle`: adicionado novo componente.
 - `QasGridItem`: adicionado novo componente.
 - `QasNestedFields`: adicionado nova propriedade `useBox`.
-- `QasBox`: adicionado nova propriedade `useSpacing`.
-- `QasHeaderActions/QasHeader`: adicionado novas propriedades `labelProps` e `badges`.
+- `QasBox`: adicionado novas propriedades `useSpacing`, `spacingX` e `spacingY`.
 - `QasInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
 - `QasNumericInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
 - `QasGridGenerator`: adicionado 2 novos slots, `content-field-[nome-da-chave]` e `header-field-[nome-da-chave]`.
 
+- `QasHeaderActions/QasHeader`:
+  - adicionado novas propriedades `labelProps` e `badges`.
+  - adicionado novos slots `actions`, `description` e `label`.
+
 - `QasFormGenerator`:
   - adicionado recurso no fieldset para dividir colunas entre eles.
   - adicionado novas propriedades `useBox` e `boxProps`.
@@ -67,6 +73,9 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasHeaderActions/QasHeader`: alterado propriedade `text` para `description`.
 - `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid.
 - `QasBadge`: modificado altura minima de 24px para para 20px e espaçamento vertical de 4px para 2px.
+- `QasPageHeader`: alterado espaçamento do `bottom` de `lg` para `md`.
+- `QasGalleryCard`: adicionado componente `QasBox` e sempre adicionado estilo de "borda" quando estiver box dentro de box.
+- `QasCard`: adicionado componente `QasBox` e sempre adicionado estilo de "borda" quando estiver box dentro de box.
 
 - `QasGridGenerator`:
   - modificado tipografia;
@@ -87,7 +96,10 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 
 ### Removido
 - `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
-- `QasHeaderActions/QasHeader`: alterado propriedade `text` para `description`.
+- `QasHeaderActions/QasHeader`:
+  - alterado propriedade `text` para `description`.
+  - removido propriedade `alignColumns`.
+  - removido slots `right` e `left` em favor de utilizar novos slots.
 
 ## [3.16.0-beta.10] - 01-08-2024
 ## BREAKING CHANGES
diff --git a/docs/src/examples/QasCard/Basic.vue b/docs/src/examples/QasCard/Basic.vue
index 9d07eeaa9..1c8a287ea 100644
--- a/docs/src/examples/QasCard/Basic.vue
+++ b/docs/src/examples/QasCard/Basic.vue
@@ -12,7 +12,7 @@
       </div>
 
       <div class="col-4">
-        <qas-card :expansion-props="expansionProps" :route="{ name: 'Root' }" title="Titulo" use-expansion>
+        <qas-card :expansion-props="expansionProps" :route="{ name: 'Root' }" title="Titulo">
           <template #default>
             <div>
               Meu conteúdo
diff --git a/docs/src/examples/QasCard/Box.vue b/docs/src/examples/QasCard/Box.vue
new file mode 100644
index 000000000..9ff61dd55
--- /dev/null
+++ b/docs/src/examples/QasCard/Box.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="container spaced">
+    <qas-box>
+      <qas-label label="Título" />
+
+      <div class="q-col-gutter-md row">
+        <div class="col-4">
+          <qas-card :route="{ name: 'Root' }" title="Titulo">
+            <template #default>
+              <div>
+                Meu conteúdo
+              </div>
+            </template>
+          </qas-card>
+        </div>
+
+        <div class="col-4">
+          <qas-card :expansion-props="expansionProps" :route="{ name: 'Root' }" title="Titulo">
+            <template #default>
+              <div>
+                Meu conteúdo
+              </div>
+            </template>
+          </qas-card>
+        </div>
+
+        <div class="col-4">
+          <qas-card
+            :actions-menu-props="actionsMenuProps" :expansion-props="expansionProps" :route="{ name: 'Root' }"
+            status-color="red-14" title="Titulo" use-expansion
+          >
+            <template #default>
+              <div>
+                Meu conteúdo
+              </div>
+            </template>
+          </qas-card>
+        </div>
+      </div>
+    </qas-box>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    actionsMenuProps () {
+      return {
+        show: {
+          label: 'Ir para detalhes',
+          icon: 'sym_r_visibility'
+        },
+
+        edit: {
+          label: 'Editar',
+          icon: 'sym_r_edit'
+        }
+      }
+    },
+
+    expansionProps () {
+      return {
+        label: 'Ver mais',
+        content: 'Conteúdo do menu expansivo'
+      }
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QasGalleryCard/Box.vue b/docs/src/examples/QasGalleryCard/Box.vue
new file mode 100644
index 000000000..2549c5cd2
--- /dev/null
+++ b/docs/src/examples/QasGalleryCard/Box.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container spaced">
+    <qas-box>
+      <qas-label label="Título" />
+
+      <div class="q-col-gutter-md row">
+        <div v-for="item in 10" :key="item" class="col-4">
+          <qas-gallery-card v-bind="props" />
+        </div>
+      </div>
+    </qas-box>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    props () {
+      return {
+        card: {
+          name: 'Meu titulo',
+          url: 'https://picsum.photos/200/300.jpg'
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QasHeader/HeaderWithBadges.vue b/docs/src/examples/QasHeader/HeaderWithBadges.vue
index 6ee40b28a..42ea80781 100644
--- a/docs/src/examples/QasHeader/HeaderWithBadges.vue
+++ b/docs/src/examples/QasHeader/HeaderWithBadges.vue
@@ -15,6 +15,11 @@ export default {
           label: 'Título do header'
         },
 
+        buttonProps: {
+          icon: 'sym_r_add',
+          label: 'Novo usuário'
+        },
+
         badges: [
           {
             label: 'Badge 1'
diff --git a/docs/src/examples/QasHeader/HeaderWithSlots.vue b/docs/src/examples/QasHeader/HeaderWithSlots.vue
index 6b6b19f52..9c5365d66 100644
--- a/docs/src/examples/QasHeader/HeaderWithSlots.vue
+++ b/docs/src/examples/QasHeader/HeaderWithSlots.vue
@@ -1,12 +1,16 @@
 <template>
   <div class="container spaced">
     <qas-header>
-      <template #left>
-        Slot da esquerda!
+      <template #label>
+        <qas-label label="Label" />
       </template>
 
-      <template #right>
-        Slot da direita!
+      <template #description>
+        Descrição
+      </template>
+
+      <template #actions>
+        <qas-btn>Ação</qas-btn>
       </template>
     </qas-header>
   </div>
diff --git a/docs/src/examples/QasHeader/HeaderWithoutActions.vue b/docs/src/examples/QasHeader/HeaderWithoutActions.vue
new file mode 100644
index 000000000..76516e120
--- /dev/null
+++ b/docs/src/examples/QasHeader/HeaderWithoutActions.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="container spaced">
+    <qas-header v-bind="headerProps" />
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    headerProps () {
+      return {
+        description: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
+        labelProps: {
+          label: 'Título do header'
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/components/card.md b/docs/src/pages/components/card.md
index 900e310f7..5e50266fa 100644
--- a/docs/src/pages/components/card.md
+++ b/docs/src/pages/components/card.md
@@ -9,3 +9,4 @@ Componente de card.
 ## Uso
 
 <doc-example file="QasCard/Basic" title="Básico" />
+<doc-example file="QasCard/Box" title="Com box" />
diff --git a/docs/src/pages/components/gallery-card.md b/docs/src/pages/components/gallery-card.md
index 9e4733174..dff506067 100644
--- a/docs/src/pages/components/gallery-card.md
+++ b/docs/src/pages/components/gallery-card.md
@@ -9,6 +9,7 @@ Componente de card de galeria (utilizado no QasUploader, QasGallery e nos produt
 ## Uso
 
 <doc-example file="QasGalleryCard/Basic" title="Básico" />
+<doc-example file="QasGalleryCard/Box" title="Com box" />
 <doc-example file="QasGalleryCard/ExGridAndActionsMenu" title="Com QasActionsMenu e QasGridGenerator" />
 
 :::info
diff --git a/docs/src/pages/components/header.md b/docs/src/pages/components/header.md
index fb6066cc5..3fc943d5b 100644
--- a/docs/src/pages/components/header.md
+++ b/docs/src/pages/components/header.md
@@ -2,13 +2,14 @@
 title: QasHeader
 ---
 
-Componente para cabeçalho usado com alguma descrição e ação.
+Componente para cabeçalho composto por label (título), badges, descrição e ação.
 
 <doc-api file="header/QasHeader" name="QasHeader" />
 
 ## Uso
 
 <doc-example file="QasHeader/HeaderWithButton" title="Com QasBtn" />
+<doc-example file="QasHeader/HeaderWithoutActions" title="Sem ações" />
 <doc-example file="QasHeader/HeaderWithBadges" title="Com badges" />
 <doc-example file="QasHeader/HeaderWithActionsMenu" title="Com QasActionsMenu e somente descrição" />
 <doc-example file="QasHeader/HeaderWithSlots" title="Com slot" />
diff --git a/ui/src/components/box/QasBox.vue b/ui/src/components/box/QasBox.vue
index 22b68f433..30db90ba7 100644
--- a/ui/src/components/box/QasBox.vue
+++ b/ui/src/components/box/QasBox.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { Spacing } from '../../enums/Spacing'
+
+import { computed, provide } from 'vue'
 
 defineOptions({ name: 'QasBox' })
 
@@ -18,17 +20,32 @@ const props = defineProps({
     type: Boolean
   },
 
+  spacingX: {
+    default: Spacing.Md,
+    type: String,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
+  spacingY: {
+    default: Spacing.Md,
+    type: String,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
   useSpacing: {
     type: Boolean,
     default: true
   }
 })
 
+provide('isBox', true)
+
 const boxClasses = computed(() => {
   return {
     'border-grey': props.outlined,
     'shadow-2': !props.unelevated,
-    'q-pa-md': props.useSpacing
+    [`q-px-${props.spacingX}`]: props.useSpacing,
+    [`q-py-${props.spacingY}`]: props.useSpacing
   }
 })
 </script>
diff --git a/ui/src/components/box/QasBox.yml b/ui/src/components/box/QasBox.yml
index dedada881..c802e3e7e 100644
--- a/ui/src/components/box/QasBox.yml
+++ b/ui/src/components/box/QasBox.yml
@@ -12,6 +12,18 @@ props:
     desc: Remove a sombra do componente.
     type: Boolean
 
+  spacing-x:
+    desc: Espaçamento horizontal do componente.
+    type: String
+    default: md
+    examples: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']
+
+  spacing-y:
+    desc: Espaçamento vertical do componente.
+    type: String
+    default: md
+    examples: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']
+
   use-spacing:
     desc: Controla espaçamento do componente.
     type: Boolean
diff --git a/ui/src/components/card/QasCard.vue b/ui/src/components/card/QasCard.vue
index fab9672a7..b97f30a68 100644
--- a/ui/src/components/card/QasCard.vue
+++ b/ui/src/components/card/QasCard.vue
@@ -1,37 +1,39 @@
 <template>
   <div class="qas-card">
-    <q-card class="column full-height overflow-hidden q-px-md q-py-sm rounded-borders-right rounded-borders-sm shadow-2" :style="style">
-      <div class="items-center justify-between row">
-        <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
-          <slot name="title">
-            {{ props.title }}
-          </slot>
-        </component>
+    <qas-box class="rounded-borders-right" v-bind="boxProps" spacing-y="sm" :style>
+      <q-card class="column full-height overflow-hidden shadow-0">
+        <div class="items-center justify-between row">
+          <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </component>
 
-        <qas-actions-menu v-if="hasActions" :list="actionsMenuProps" :use-label="false" />
-      </div>
+          <qas-actions-menu v-if="hasActions" :list="actionsMenuProps" :use-label="false" />
+        </div>
 
-      <div class="q-my-sm qas-card__content">
-        <slot name="default" />
-      </div>
+        <div class="q-my-sm qas-card__content">
+          <slot name="default" />
+        </div>
 
-      <div class="q-mt-auto">
-        <q-separator v-if="hasFooter" class="q-mb-sm" />
+        <div class="q-mt-auto">
+          <q-separator v-if="hasFooter" class="q-mb-sm" />
 
-        <slot name="footer">
-          <q-expansion-item v-if="hasExpansion" class="full-width" dense expand-icon-class="text-primary" header-class="q-pa-none text-primary" :label="props.expansionProps.label">
-            <slot name="expansion-content">
-              {{ props.expansionProps.content }}
-            </slot>
-          </q-expansion-item>
-        </slot>
-      </div>
-    </q-card>
+          <slot name="footer">
+            <q-expansion-item v-if="hasExpansion" class="full-width" dense expand-icon-class="text-primary" header-class="q-pa-none text-primary" :label="props.expansionProps.label">
+              <slot name="expansion-content">
+                {{ props.expansionProps.content }}
+              </slot>
+            </q-expansion-item>
+          </slot>
+        </div>
+      </q-card>
+    </qas-box>
   </div>
 </template>
 
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, inject } from 'vue'
 
 import { colors } from 'quasar'
 
@@ -64,6 +66,13 @@ const props = defineProps({
   }
 })
 
+const isInsideBox = inject('isBox', false)
+
+const boxProps = {
+  outlined: isInsideBox,
+  unelevated: isInsideBox
+}
+
 const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length)
 
 const hasExpansion = computed(() => !!Object.keys(props.expansionProps).length)
@@ -84,7 +93,7 @@ const style = computed(() => {
   const { getPaletteColor } = colors
 
   return {
-    borderLeft: `4px solid ${getPaletteColor(props.statusColor)}`
+    borderLeft: `4px solid ${getPaletteColor(props.statusColor)} !important`
   }
 })
 
diff --git a/ui/src/components/gallery-card/QasGalleryCard.vue b/ui/src/components/gallery-card/QasGalleryCard.vue
index 554e107ca..1ddcce7ce 100644
--- a/ui/src/components/gallery-card/QasGalleryCard.vue
+++ b/ui/src/components/gallery-card/QasGalleryCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white q-pa-md qas-gallery-card rounded-borders shadow-2" :class="classes">
+  <qas-box class="bg-white qas-gallery-card" :class="classes" v-bind="boxProps">
     <header class="flat items-center no-wrap row" :class="headerClasses">
       <slot name="header">
         <div class="ellipsis q-mr-xs qas-gallery__name text-subtitle1">
@@ -45,11 +45,11 @@
         <qas-grid-generator v-if="hasGridGenerator" v-bind="props.gridGeneratorProps" />
       </slot>
     </div>
-  </div>
+  </qas-box>
 </template>
 
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, inject } from 'vue'
 
 defineOptions({ name: 'QasGalleryCard' })
 
@@ -91,6 +91,13 @@ const props = defineProps({
 
 const slots = useSlots()
 
+const isInsideBox = inject('isBox', false)
+
+const boxProps = {
+  outlined: isInsideBox,
+  unelevated: isInsideBox
+}
+
 const errorClasses = [
   'bg-grey-4',
   'flex',
diff --git a/ui/src/components/header/QasHeader.vue b/ui/src/components/header/QasHeader.vue
index 9f06eac36..9d5684c7a 100644
--- a/ui/src/components/header/QasHeader.vue
+++ b/ui/src/components/header/QasHeader.vue
@@ -1,35 +1,44 @@
 <template>
-  <div class="justify-between no-wrap q-col-gutter-x-md row" :class="containerClass">
-    <div :class="leftClass">
-      <slot name="left">
-        <div class="items-center q-col-gutter-sm row" :class="labelSectionClasses">
-          <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
-
-          <div class="col-auto items-center q-col-gutter-sm row">
-            <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
-              <qas-badge v-bind="badge" />
-            </div>
+  <div :class="containerClass">
+    <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" />
+        </slot>
+
+        <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
+          <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex">
+            <qas-badge v-bind="badge" />
           </div>
         </div>
+      </div>
 
-        <span v-if="props.description" class="text-body1 text-grey-8">
-          {{ props.description }}
-        </span>
-      </slot>
-    </div>
-
-    <div v-if="hasRightSide" class="justify-end row">
-      <slot name="right">
+      <slot name="actions">
         <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" />
       </slot>
     </div>
+
+    <div class="items-start justify-between no-wrap q-col-gutter-sm row">
+      <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </div>
+
+      <div v-if="!hasLabelSection" class="justify-end row">
+        <slot name="actions">
+          <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" />
+        </slot>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { FlexAlign } from '../../enums/Align'
 import { Spacing } from '../../enums/Spacing'
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 
@@ -43,12 +52,6 @@ const props = defineProps({
     default: () => ({})
   },
 
-  alignColumns: {
-    default: FlexAlign.Center,
-    type: String,
-    validator: value => Object.values(FlexAlign).includes(value)
-  },
-
   badges: {
     type: Array,
     default: () => []
@@ -79,13 +82,7 @@ const props = defineProps({
 const slots = useSlots()
 
 // computed
-const containerClass = computed(() => `items-${props.alignColumns} q-mb-${props.spacing}`)
-
-const leftClass = computed(() => {
-  return {
-    'col-12': !hasRightSide.value
-  }
-})
+const containerClass = computed(() => `q-mb-${props.spacing}`)
 
 const labelSectionClasses = computed(() => {
   return {
@@ -104,10 +101,6 @@ const hasBadges = computed(() => !!props.badges.length)
 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 hasRightSide = computed(() => {
-  const hasRightSlot = !!slots.right
-
-  return hasRightSlot || hasDefaultActionsMenu.value || hasDefaultButton.value
-})
+const hasDescriptionSection = computed(() => props.description || slots.description)
+const hasLabelSection = computed(() => hasLabel.value || slots.label)
 </script>
diff --git a/ui/src/components/header/QasHeader.yml b/ui/src/components/header/QasHeader.yml
index 01f653296..4fcae3acf 100644
--- a/ui/src/components/header/QasHeader.yml
+++ b/ui/src/components/header/QasHeader.yml
@@ -1,7 +1,7 @@
 type: component
 
 meta:
-  desc: Componente para cabeçalho usado com alguma descrição e ação.
+  desc: Componente para cabeçalho composto por label (título), badges, descrição e ação.
 
 props:
   actions-menu-props:
@@ -9,12 +9,6 @@ props:
     default: {}
     type: Object
 
-  align-columns:
-    desc: Alinhamento vertical das colunas.
-    default: center
-    type: String
-    examples: [start, center, end, between, around]
-
   badges:
     desc: Adiciona badges ao lado do titulo (QasLabel), caso não tenha titulo fica somente as bages acima da descrição.
     default: []
@@ -41,8 +35,11 @@ props:
     examples: [none, xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl']
 
 slots:
-  left:
-    desc: slot para acessar seção da esquerda (descrição).
+  actions:
+    desc: slot para acessar seção da direita (ações).
+
+  description:
+    desc: slot para acessar seção de descrição.
 
-  right:
-    desc: slot para acessar seção da direita (ação).
+  label:
+    desc: slot para acessar o label (título).
diff --git a/ui/src/components/page-header/QasPageHeader.vue b/ui/src/components/page-header/QasPageHeader.vue
index 34234fdd3..e3ec411b8 100644
--- a/ui/src/components/page-header/QasPageHeader.vue
+++ b/ui/src/components/page-header/QasPageHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-toolbar class="justify-between q-mb-lg q-px-none qas-page-header">
+    <q-toolbar class="justify-between q-mb-md q-px-none qas-page-header">
       <div class="ellipsis">
         <q-toolbar-title v-if="props.title" class="text-h3">
           {{ props.title }}

From d7fde2610bed95e42cf73fffe98b5f2ef4451e12 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Mon, 12 Aug 2024 17:53:20 -0300
Subject: [PATCH 18/22] feat: Update QasFormGenerator to include boxed example

---
 docs/src/pages/components/form-generator.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/form-generator.md b/docs/src/pages/components/form-generator.md
index a15381efd..f315b3aec 100644
--- a/docs/src/pages/components/form-generator.md
+++ b/docs/src/pages/components/form-generator.md
@@ -16,7 +16,7 @@ Para saber mais sobre o **API Design Pattern** clice [aqui](https://www.notion.s
 
 ## Uso
 <doc-example file="QasFormGenerator/Basic" title="Básico" />
-<!-- <doc-example file="QasFormGenerator/Boxed" title="Com box" /> -->
+<doc-example file="QasFormGenerator/Boxed" title="Com box" />
 
 :::tip
 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.

From 94d5168de486c76e242c26317448594548cbf50a Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Tue, 13 Aug 2024 09:28:06 -0300
Subject: [PATCH 19/22] feat: Add QasInfo component

---
 CHANGELOG.md                               |   1 +
 docs/src/assets/menu.js                    |   4 +
 docs/src/examples/QasInfo/Basic.vue        |  14 ++
 docs/src/examples/QasInfo/Button.vue       |  19 +++
 docs/src/examples/QasInfo/ExternalLink.vue |  15 ++
 docs/src/examples/QasInfo/NoAction.vue     |  12 ++
 docs/src/pages/components/info.md          |  20 +++
 ui/src/components/info/QasInfo.vue         | 158 +++++++++++++++++++++
 ui/src/components/info/QasInfo.yml         |  34 +++++
 ui/src/vue-plugin.js                       |   3 +
 10 files changed, 280 insertions(+)
 create mode 100644 docs/src/examples/QasInfo/Basic.vue
 create mode 100644 docs/src/examples/QasInfo/Button.vue
 create mode 100644 docs/src/examples/QasInfo/ExternalLink.vue
 create mode 100644 docs/src/examples/QasInfo/NoAction.vue
 create mode 100644 docs/src/pages/components/info.md
 create mode 100644 ui/src/components/info/QasInfo.vue
 create mode 100644 ui/src/components/info/QasInfo.yml

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d1989987..faa6f60c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,7 @@ Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de s
 - `QasRadio`: adicionado novo componente.
 - `QasToggle`: adicionado novo componente.
 - `QasGridItem`: adicionado novo componente.
+- `QasInfo`: adicionado novo componente.
 - `QasNestedFields`: adicionado nova propriedade `useBox`.
 - `QasBox`: adicionado novas propriedades `useSpacing`, `spacingX` e `spacingY`.
 - `QasInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
index b39007ea4..778d1bf6d 100644
--- a/docs/src/assets/menu.js
+++ b/docs/src/assets/menu.js
@@ -199,6 +199,10 @@ module.exports = [
         name: 'Input',
         path: '/components/input'
       },
+      {
+        name: 'Info',
+        path: '/components/info'
+      },
       {
         name: 'Label',
         path: '/components/label'
diff --git a/docs/src/examples/QasInfo/Basic.vue b/docs/src/examples/QasInfo/Basic.vue
new file mode 100644
index 000000000..3525e7255
--- /dev/null
+++ b/docs/src/examples/QasInfo/Basic.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="container q-py-lg">
+    <qas-info v-bind="infoProps" />
+  </div>
+</template>
+
+<script setup>
+const infoProps = {
+  text: 'Usuário incompleto, [clique aqui] para completar.',
+  routerLinkProps: {
+    to: '/start/develop'
+  }
+}
+</script>
diff --git a/docs/src/examples/QasInfo/Button.vue b/docs/src/examples/QasInfo/Button.vue
new file mode 100644
index 000000000..01f9c628c
--- /dev/null
+++ b/docs/src/examples/QasInfo/Button.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="container q-py-lg">
+    <qas-info v-bind="infoProps" />
+  </div>
+</template>
+
+<script setup>
+const infoProps = {
+  avatarProps: {
+    color: 'primary'
+  },
+
+  buttonProps: {
+    onClick: () => alert('Button clicked')
+  },
+
+  text: 'Usuário incompleto, [clique aqui] para completar.'
+}
+</script>
diff --git a/docs/src/examples/QasInfo/ExternalLink.vue b/docs/src/examples/QasInfo/ExternalLink.vue
new file mode 100644
index 000000000..b1d8142a2
--- /dev/null
+++ b/docs/src/examples/QasInfo/ExternalLink.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="container q-py-lg">
+    <qas-info v-bind="infoProps" />
+  </div>
+</template>
+
+<script setup>
+const infoProps = {
+  text: '[Clique aqui] para ir para o google.',
+  buttonProps: {
+    href: 'http://google.com',
+    target: '_blank'
+  }
+}
+</script>
diff --git a/docs/src/examples/QasInfo/NoAction.vue b/docs/src/examples/QasInfo/NoAction.vue
new file mode 100644
index 000000000..610b600b7
--- /dev/null
+++ b/docs/src/examples/QasInfo/NoAction.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="container q-py-lg">
+    <qas-info v-bind="infoProps" />
+  </div>
+</template>
+
+<script setup>
+const infoProps = {
+  text: 'Usuário incompleto.',
+  useRegex: false
+}
+</script>
diff --git a/docs/src/pages/components/info.md b/docs/src/pages/components/info.md
new file mode 100644
index 000000000..1e6620881
--- /dev/null
+++ b/docs/src/pages/components/info.md
@@ -0,0 +1,20 @@
+---
+title: QasInfo
+---
+
+Componente para informações.
+
+<doc-api file="info/QasInfo" name="QasInfo" />
+
+:::info
+Quando a propriedade "useRegex" for "true", todo texto da propriedade "text" que estiver dentro de `[]` será substituído pelos componentes:
+  - RouterLink (se existir a propriedade `routerLinkProps`).
+  - QasBtn (se existir a propriedade `buttonProps`).
+:::
+
+## Uso
+
+<doc-example file="QasInfo/Basic" title="Básico" />
+<doc-example file="QasInfo/Button" title="Com botão" />
+<doc-example file="QasInfo/ExternalLink" title="Link externo" />
+<doc-example file="QasInfo/NoAction" title="Sem ação" />
diff --git a/ui/src/components/info/QasInfo.vue b/ui/src/components/info/QasInfo.vue
new file mode 100644
index 000000000..30757e89e
--- /dev/null
+++ b/ui/src/components/info/QasInfo.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="app-alert-actions flex items-center no-wrap">
+    <qas-avatar v-bind="defaultAvatarProps" />
+
+    <component
+      :is="textComponent"
+      v-if="useRegex"
+      class="q-ml-sm"
+    />
+
+    <span
+      v-else
+      class="q-ml-sm"
+    >
+      {{ props.text }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { h, computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { QasBtn } from 'asteroid'
+
+defineOptions({ name: 'QasInfo' })
+
+const props = defineProps({
+  avatarProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  buttonProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  text: {
+    type: String,
+    required: true
+  },
+
+  routerLinkProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  useRegex: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const defaultAvatarProps = computed(() => {
+  return {
+    color: 'red-14',
+    ...props.avatarProps,
+    icon: 'sym_r_priority_high',
+    size: 'sm'
+  }
+})
+
+const textComponent = computed(() => {
+  /**
+   * regex para encontrar caracteres que estiverem dentro de [].
+   */
+  const regex = /\[.*?\]/g
+
+  const [content] = props.text.match(regex)
+
+  /**
+   * dado o texto: Para saber mais, [Clique aqui].
+   *
+   * retorna: 'Clique aqui'
+   */
+  const routerLabel = content.replaceAll(/[[\]]/g, '')
+
+  /**
+   * dado o texto: Para saber mais, [Clique aqui].
+   *
+   * retorna: 'Para saber mais, $.'
+   */
+  const replacedText = props.text.replaceAll(regex, '$')
+
+  /**
+   * É necessário usar o regex ao invés de '$' para ele não remover o carácter
+   * ao fazer o split
+   *
+   * dado o texto: 'Para saber mais, [Clique aqui].'
+   *
+   * retorna: ['Para saber mais,', '$', '.']
+   *
+   */
+  const splitted = replacedText.split(/(\$)/)
+
+  const index = splitted.findIndex(item => item === '$')
+
+  const hasButtonProps = !!Object.keys(props.buttonProps).length
+
+  const getRouterLinkRender = () => {
+    return h(
+      RouterLink,
+      {
+        ...props.routerLinkProps,
+        class: 'text-primary text-subtitle1 app-alert-actions__link'
+      },
+      {
+        default: () => routerLabel
+      }
+    )
+  }
+
+  const getQasBtnRender = () => {
+    return h(
+      QasBtn,
+      {
+        variant: 'tertiary',
+        label: routerLabel,
+        ...props.buttonProps
+      }
+    )
+  }
+
+  /**
+   * Cria um render do router link ou QasBtn
+   *
+   * @example
+   *
+   * ```html
+   * <router-link
+   *  class="text-primary text-subtitle1 app-alert-actions__link"
+   *  :to="props.route"
+   * >
+   *  Clique aqui
+   * </router-link>
+   * ```
+   */
+  const renderComponent = hasButtonProps ? getQasBtnRender() : getRouterLinkRender()
+
+  splitted.splice(index, 1, renderComponent)
+
+  return h(
+    'span',
+    {
+      class: 'text-body1 text-grey-8'
+    },
+    splitted
+  )
+})
+</script>
+
+<style lang="scss">
+.app-alert-actions {
+  &__link {
+    text-decoration: none;
+  }
+}
+</style>
diff --git a/ui/src/components/info/QasInfo.yml b/ui/src/components/info/QasInfo.yml
new file mode 100644
index 000000000..2f9741ebe
--- /dev/null
+++ b/ui/src/components/info/QasInfo.yml
@@ -0,0 +1,34 @@
+type: component
+
+meta:
+  desc: Componente para informações.
+
+props:
+  avatar-props:
+    desc: Props do componente QasAvatar.
+    default:
+      color: 'red-14'
+      icon: 'sym_r_priority_high'
+      size: 'sm'
+    type: Object
+
+  buttonProps:
+    desc: Props do componente QasBtn.
+    default:
+      variant: primary
+    type: Object
+
+  text:
+    desc: Texto a ser exibido.
+    type: String
+    default: ''
+
+  router-link-props:
+    desc: Propriedades do componente RouterLink.
+    default: {}
+    type: Object
+
+  use-regex:
+    desc: Faz a busca pelos "[]" dentro da propriedade "text" para substituir pelo QasBtn ou RouterLink.
+    default: true
+    type: Boolean
diff --git a/ui/src/vue-plugin.js b/ui/src/vue-plugin.js
index a865c60be..f13e82769 100644
--- a/ui/src/vue-plugin.js
+++ b/ui/src/vue-plugin.js
@@ -36,6 +36,7 @@ import QasGridItem from './components/grid-item/QasGridItem.vue'
 import QasHeader from './components/header/QasHeader.vue'
 import QasInfiniteScroll from './components/infinite-scroll/QasInfiniteScroll.vue'
 import QasInput from './components/input/QasInput.vue'
+import QasInfo from './components/info/QasInfo.vue'
 import QasLabel from './components/label/QasLabel.vue'
 import QasLayout from './components/layout/QasLayout.vue'
 import QasListItems from './components/list-items/QasListItems.vue'
@@ -133,6 +134,7 @@ async function install (app) {
   app.component('QasHeader', QasHeader)
   app.component('QasInfiniteScroll', QasInfiniteScroll)
   app.component('QasInput', QasInput)
+  app.component('QasInfo', QasInfo)
   app.component('QasLabel', QasLabel)
   app.component('QasLayout', QasLayout)
   app.component('QasListItems', QasListItems)
@@ -232,6 +234,7 @@ export {
   QasHeader,
   QasInfiniteScroll,
   QasInput,
+  QasInfo,
   QasLabel,
   QasLayout,
   QasListItems,

From 41f82548d48a673e65b67e130ec808493d530800 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Tue, 13 Aug 2024 13:39:26 -0300
Subject: [PATCH 20/22] Changes for code review

---
 REDESIGN-NEXT-STEPS.md                         |  1 -
 .../src/examples/QasFormGenerator/Fieldset.vue |  2 +-
 docs/src/examples/QasInput/Basic.vue           |  2 ++
 .../HeaderActionsWithActionsMenu.vue           |  4 ++--
 .../QasPageHeader/HeaderActionsWithButton.vue  |  4 ++--
 docs/src/pages/components/badge.md             |  2 +-
 docs/src/pages/components/input.md             |  4 ++--
 ui/src/components/card/QasCard.vue             | 16 ++++++++++------
 ui/src/components/filters/QasFilters.vue       |  4 ++--
 ui/src/components/grid-item/QasGridItem.vue    | 14 +++++++-------
 ui/src/components/header/QasHeader.vue         | 14 +++++++-------
 ui/src/components/info/QasInfo.vue             | 18 +++++++++---------
 ui/src/components/info/QasInfo.yml             | 10 +++++-----
 .../nested-fields/QasNestedFields.vue          |  4 ++--
 .../nested-fields/QasNestedFields.yml          |  2 +-
 ui/src/components/select/QasSelect.vue         | 12 ++----------
 ui/src/css/components/field.scss               | 10 +++++-----
 17 files changed, 60 insertions(+), 63 deletions(-)

diff --git a/REDESIGN-NEXT-STEPS.md b/REDESIGN-NEXT-STEPS.md
index d0d06dd2e..5fa419b93 100644
--- a/REDESIGN-NEXT-STEPS.md
+++ b/REDESIGN-NEXT-STEPS.md
@@ -1,2 +1 @@
 - [] Possibilidade de variação de tamanho de ícone nos botões;
-- 
diff --git a/docs/src/examples/QasFormGenerator/Fieldset.vue b/docs/src/examples/QasFormGenerator/Fieldset.vue
index bfc80e844..f9928845e 100644
--- a/docs/src/examples/QasFormGenerator/Fieldset.vue
+++ b/docs/src/examples/QasFormGenerator/Fieldset.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-form-generator v-model="model" :columns="columns" :fields="fields" :fields-props="fieldsProps" :fieldset="fieldset" fieldset-gutter="lg" :use-box="true" />
+    <qas-form-generator v-model="model" :columns="columns" :fields="fields" :fields-props="fieldsProps" :fieldset="fieldset" fieldset-gutter="lg" use-box />
 
     <div class="q-mt-lg">
       model: <qas-debugger :inspect="[model]" />
diff --git a/docs/src/examples/QasInput/Basic.vue b/docs/src/examples/QasInput/Basic.vue
index f8cec7cf3..2e963f1a2 100644
--- a/docs/src/examples/QasInput/Basic.vue
+++ b/docs/src/examples/QasInput/Basic.vue
@@ -4,6 +4,7 @@
       <template #prepend>
         <q-icon name="sym_r_search" size="md" />
       </template>
+
       <template #append>
         <q-icon name="sym_r_edit" size="xs" />
         <qas-btn icon="sym_r_search" />
@@ -14,6 +15,7 @@
       <template #prepend>
         <q-icon name="sym_r_search" size="md" />
       </template>
+
       <template #append>
         <q-icon name="sym_r_edit" size="xs" />
         <qas-btn icon="sym_r_search" />
diff --git a/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue b/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue
index 405f18c02..2c38c810c 100644
--- a/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue
+++ b/docs/src/examples/QasPageHeader/HeaderActionsWithActionsMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-page-header :breadcrumbs="breadcrumbs" :header-props="headerProps" title="Nome do usuário" />
+    <qas-page-header :breadcrumbs :header-props title="Nome do usuário" />
   </div>
 </template>
 
@@ -28,7 +28,7 @@ export default {
 
     headerProps () {
       return {
-        text: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
+        description: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
         actionsMenuProps: {
           deleteProps: {
             entity: 'users'
diff --git a/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue b/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue
index 3d980d086..1efff2281 100644
--- a/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue
+++ b/docs/src/examples/QasPageHeader/HeaderActionsWithButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container spaced">
-    <qas-page-header :breadcrumbs="breadcrumbs" :header-props="headerProps" title="Nome do usuário" />
+    <qas-page-header :breadcrumbs :header-props title="Nome do usuário" />
   </div>
 </template>
 
@@ -28,7 +28,7 @@ export default {
 
     headerProps () {
       return {
-        text: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
+        description: 'Algum texto de exemplo para ficar ao lado do botão de adicionar.',
         buttonProps: {
           icon: 'sym_r_add',
           label: 'Novo usuário'
diff --git a/docs/src/pages/components/badge.md b/docs/src/pages/components/badge.md
index f557af20e..f387aeade 100644
--- a/docs/src/pages/components/badge.md
+++ b/docs/src/pages/components/badge.md
@@ -7,7 +7,7 @@ Componente wrapper do QBadge/QChip do quasar.
 <doc-api file="badge/QasBadge" name="QasBadge" />
 
 :::tip
-- Quando usado como "removable" ele renderiza um QChip.
+- Quando usado com "removable" ele renderiza um QChip.
 - Quando usado sem "removable" ele renderiza um QBadge.
 :::
 
diff --git a/docs/src/pages/components/input.md b/docs/src/pages/components/input.md
index d55fe2bfb..5e5b54d24 100644
--- a/docs/src/pages/components/input.md
+++ b/docs/src/pages/components/input.md
@@ -42,5 +42,5 @@ Caso seja passado uma mask que não seja essas acima, será usado a que foi pass
 
 <doc-example file="QasInput/Basic" title="Básico" />
 <doc-example file="QasInput/Textarea" title="Textarea" />
-<!-- <doc-example file="QasInput/Required" title="Obrigatório" /> -->
-<!-- <doc-example file="QasInput/Masks" title="Mascaras" /> -->
+<doc-example file="QasInput/Required" title="Obrigatório" />
+<doc-example file="QasInput/Masks" title="Mascaras" />
diff --git a/ui/src/components/card/QasCard.vue b/ui/src/components/card/QasCard.vue
index b97f30a68..03ef6353b 100644
--- a/ui/src/components/card/QasCard.vue
+++ b/ui/src/components/card/QasCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="qas-card">
-    <qas-box class="rounded-borders-right" v-bind="boxProps" spacing-y="sm" :style>
+    <qas-box class="rounded-borders-right" v-bind="boxProps">
       <q-card class="column full-height overflow-hidden shadow-0">
         <div class="items-center justify-between row">
           <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
@@ -9,7 +9,7 @@
             </slot>
           </component>
 
-          <qas-actions-menu v-if="hasActions" :list="actionsMenuProps" :use-label="false" />
+          <qas-actions-menu v-if="hasActions" :list="props.actionsMenuProps" :use-label="false" />
         </div>
 
         <div class="q-my-sm qas-card__content">
@@ -68,10 +68,14 @@ const props = defineProps({
 
 const isInsideBox = inject('isBox', false)
 
-const boxProps = {
-  outlined: isInsideBox,
-  unelevated: isInsideBox
-}
+const boxProps = computed(() => {
+  return {
+    outlined: isInsideBox,
+    unelevated: isInsideBox,
+    spacingY: 'sm',
+    style: style.value
+  }
+})
 
 const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length)
 
diff --git a/ui/src/components/filters/QasFilters.vue b/ui/src/components/filters/QasFilters.vue
index 9c5945433..d917941ff 100644
--- a/ui/src/components/filters/QasFilters.vue
+++ b/ui/src/components/filters/QasFilters.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="qas-filters" :class="filtersClass">
+  <section class="qas-filters" :class="filtersClasses">
     <div v-if="showFilters" class="q-col-gutter-x-md row">
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
@@ -204,7 +204,7 @@ export default {
       return getState.call(this, { entity: this.entity, key: 'filters' })
     },
 
-    filtersClass () {
+    filtersClasses () {
       return {
         'q-mb-xl': this.useSpacing
       }
diff --git a/ui/src/components/grid-item/QasGridItem.vue b/ui/src/components/grid-item/QasGridItem.vue
index 7b4e4cd9c..70fe71257 100644
--- a/ui/src/components/grid-item/QasGridItem.vue
+++ b/ui/src/components/grid-item/QasGridItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes.main">
+  <div :class="classes.container">
     <header v-bind="headerProps">
       <slot name="header">
         {{ props.label }}
@@ -27,11 +27,6 @@ const props = defineProps({
     default: ''
   },
 
-  value: {
-    type: [String, Number, Boolean],
-    default: ''
-  },
-
   useEllipsis: {
     default: true,
     type: Boolean
@@ -39,6 +34,11 @@ const props = defineProps({
 
   useInline: {
     type: Boolean
+  },
+
+  value: {
+    type: [String, Number, Boolean],
+    default: ''
   }
 })
 
@@ -51,7 +51,7 @@ const classes = computed(() => {
   const isInline = props.useInline && !screen.isSmall
 
   return {
-    main: {
+    container: {
       flex: isInline,
       'q-col-gutter-x-md': isInline,
       'justify-between': isInline,
diff --git a/ui/src/components/header/QasHeader.vue b/ui/src/components/header/QasHeader.vue
index 9d5684c7a..46d1fdd1a 100644
--- a/ui/src/components/header/QasHeader.vue
+++ b/ui/src/components/header/QasHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="containerClass">
+  <div :class="containerClasses">
     <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">
@@ -67,22 +67,22 @@ const props = defineProps({
     default: ''
   },
 
+  labelProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   spacing: {
     default: Spacing.Xl,
     type: String,
     validator: gutterValidator
-  },
-
-  labelProps: {
-    type: Object,
-    default: () => ({})
   }
 })
 
 const slots = useSlots()
 
 // computed
-const containerClass = computed(() => `q-mb-${props.spacing}`)
+const containerClasses = computed(() => `q-mb-${props.spacing}`)
 
 const labelSectionClasses = computed(() => {
   return {
diff --git a/ui/src/components/info/QasInfo.vue b/ui/src/components/info/QasInfo.vue
index 30757e89e..9e295addb 100644
--- a/ui/src/components/info/QasInfo.vue
+++ b/ui/src/components/info/QasInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-alert-actions flex items-center no-wrap">
+  <div class="flex items-center no-wrap qas-info">
     <qas-avatar v-bind="defaultAvatarProps" />
 
     <component
@@ -35,16 +35,16 @@ const props = defineProps({
     default: () => ({})
   },
 
-  text: {
-    type: String,
-    required: true
-  },
-
   routerLinkProps: {
     type: Object,
     default: () => ({})
   },
 
+  text: {
+    type: String,
+    required: true
+  },
+
   useRegex: {
     type: Boolean,
     default: true
@@ -102,7 +102,7 @@ const textComponent = computed(() => {
       RouterLink,
       {
         ...props.routerLinkProps,
-        class: 'text-primary text-subtitle1 app-alert-actions__link'
+        class: 'text-primary text-subtitle1 qas-info__link'
       },
       {
         default: () => routerLabel
@@ -128,7 +128,7 @@ const textComponent = computed(() => {
    *
    * ```html
    * <router-link
-   *  class="text-primary text-subtitle1 app-alert-actions__link"
+   *  class="text-primary text-subtitle1 qas-info__link"
    *  :to="props.route"
    * >
    *  Clique aqui
@@ -150,7 +150,7 @@ const textComponent = computed(() => {
 </script>
 
 <style lang="scss">
-.app-alert-actions {
+.qas-info {
   &__link {
     text-decoration: none;
   }
diff --git a/ui/src/components/info/QasInfo.yml b/ui/src/components/info/QasInfo.yml
index 2f9741ebe..7322f910a 100644
--- a/ui/src/components/info/QasInfo.yml
+++ b/ui/src/components/info/QasInfo.yml
@@ -18,16 +18,16 @@ props:
       variant: primary
     type: Object
 
-  text:
-    desc: Texto a ser exibido.
-    type: String
-    default: ''
-
   router-link-props:
     desc: Propriedades do componente RouterLink.
     default: {}
     type: Object
 
+  text:
+    desc: Texto a ser exibido.
+    type: String
+    default: ''
+
   use-regex:
     desc: Faz a busca pelos "[]" dentro da propriedade "text" para substituir pelo QasBtn ou RouterLink.
     default: true
diff --git a/ui/src/components/nested-fields/QasNestedFields.vue b/ui/src/components/nested-fields/QasNestedFields.vue
index 7629c1db9..372499f85 100644
--- a/ui/src/components/nested-fields/QasNestedFields.vue
+++ b/ui/src/components/nested-fields/QasNestedFields.vue
@@ -1,6 +1,6 @@
 <template>
   <div :id="fieldName" class="qas-nested-fields" :data-cy="`nested-fields-${fieldName}`">
-    <component :is="boxComponent">
+    <component :is="containerComponent">
       <div v-if="useSingleLabel" class="text-left">
         <qas-label :label="fieldLabel" typography="h5" />
       </div>
@@ -259,7 +259,7 @@ export default {
       return this.field?.children
     },
 
-    boxComponent () {
+    containerComponent () {
       return this.useBox ? 'qas-box' : 'div'
     },
 
diff --git a/ui/src/components/nested-fields/QasNestedFields.yml b/ui/src/components/nested-fields/QasNestedFields.yml
index abdc2decf..f92129402 100644
--- a/ui/src/components/nested-fields/QasNestedFields.yml
+++ b/ui/src/components/nested-fields/QasNestedFields.yml
@@ -114,7 +114,7 @@ props:
     type: Boolean
 
   use-box:
-    desc: Contra o QasBox.
+    desc: Controla o QasBox.
     default: false
     type: Boolean
 
diff --git a/ui/src/components/select/QasSelect.vue b/ui/src/components/select/QasSelect.vue
index 95a47832c..9212aff53 100644
--- a/ui/src/components/select/QasSelect.vue
+++ b/ui/src/components/select/QasSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClass" no-error-icon :outlined="false">
+  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon :outlined="false">
     <template v-if="isSearchable" #prepend>
       <q-icon name="sym_r_search" />
     </template>
@@ -110,7 +110,6 @@ export default {
         emitValue: true,
         mapOptions: true,
         outlined: true,
-
         dense: true,
         dropdownIcon: 'sym_r_expand_more',
         clearIcon: 'sym_r_close',
@@ -132,12 +131,6 @@ export default {
         onPopupShow: this.onPopupShow,
 
         ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll })
-
-        // ...(this.useLazyLoading && {
-        //   onPopupHide: this.onPopupHide,
-        //   onPopupShow: this.onPopupShow,
-        //   onVirtualScroll: this.mx_onVirtualScroll
-        // })
       }
     },
 
@@ -195,7 +188,7 @@ export default {
     },
 
     // redesign
-    componentClass () {
+    componentClasses () {
       return {
         'qas-select--has-icon': this.isSearchable || this.hasAppend,
         'qas-select--closed': !this.isPopupContentOpen,
@@ -366,7 +359,6 @@ export default {
   }
 
   .q-chip__icon--remove {
-    // color: $grey-9;
     opacity: 1;
   }
 }
diff --git a/ui/src/css/components/field.scss b/ui/src/css/components/field.scss
index c7cdb3038..6f6d1dd49 100644
--- a/ui/src/css/components/field.scss
+++ b/ui/src/css/components/field.scss
@@ -4,7 +4,7 @@
   .q-field__append,
   .q-field__prepend {
     will-change: transform;
-    transition: transform 0.3s;
+    transition: transform var(--qas-generic-transition);
   }
 
   .q-field__label {
@@ -42,25 +42,25 @@
   // Somente fields com label
   &--float.q-field--labeled,
   &--focused.q-field--labeled {
-    transition: transform 0.3s, font-size 0.3s;
+    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
 
     .q-field__label {
       transform: translateY(-10px) scale(0.85) !important;
     }
 
     .q-field__prepend {
-      transition: transform 0.3s;
+      transition: transform var(--qas-generic-transition);
       transform: translateY(6px) !important;
     }
 
     .q-field__append {
-      transition: transform 0.3s;
+      transition: transform var(--qas-generic-transition);
       transform: translateY(6px) !important;
     }
   }
 
   .q-field__label {
-    transition: transform 0.3s, font-size 0.3s;
+    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
   }
 
   &--float.qas-numeric-input--has-icon,

From 2b775daf09bcf1e824e1bb02dfcfb155fb74cbe6 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Tue, 13 Aug 2024 14:41:20 -0300
Subject: [PATCH 21/22] feat: Update QasToggle component to use v-model for
 two-way data binding

---
 docs/src/examples/QasToggle/Basic.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/src/examples/QasToggle/Basic.vue b/docs/src/examples/QasToggle/Basic.vue
index 924db135f..a63748159 100644
--- a/docs/src/examples/QasToggle/Basic.vue
+++ b/docs/src/examples/QasToggle/Basic.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="container spaced">
-    <qas-toggle label="Aceitar" :model-value="false" />
+    <qas-toggle v-model="model" label="Aceitar" />
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
 defineOptions({ name: 'Basic' })
+
+const model = ref(false)
 </script>

From c66c3214b9f23c5226a909d053fc82bf10944a26 Mon Sep 17 00:00:00 2001
From: Douglas Calora <douglascalora123@gmail.com>
Date: Tue, 13 Aug 2024 14:41:32 -0300
Subject: [PATCH 22/22] refactor: Update QasInfo component to include text
 styling

---
 ui/src/components/info/QasInfo.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/ui/src/components/info/QasInfo.vue b/ui/src/components/info/QasInfo.vue
index 9e295addb..8e34e98f6 100644
--- a/ui/src/components/info/QasInfo.vue
+++ b/ui/src/components/info/QasInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center no-wrap qas-info">
+  <div class="flex items-center no-wrap qas-info text-body1 text-grey-8">
     <qas-avatar v-bind="defaultAvatarProps" />
 
     <component
@@ -141,9 +141,6 @@ const textComponent = computed(() => {
 
   return h(
     'span',
-    {
-      class: 'text-body1 text-grey-8'
-    },
     splitted
   )
 })