@bildvitta/quasar-ui-asteroid 3.15.0-beta.9 → 3.16.0-beta.0

package/package.json

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

package/src/components/actions-menu/QasActionsMenu.vue

@@ -139,9 +139,27 @@ const primaryKey = computed(() => {
   return props.splitName in fullList.value ? props.splitName : Object.keys(fullList.value)?.[0]
 })
 
+const defaultButtonPropsList = computed(() => {
+  const defaultButtonPropsList = {
+    useHoverOnWhiteColor: true,
+    useLabelOnSmallScreen: false
+  }
+
+  const normalizedButtonPropsList = {}
+
+  for (const key in formattedList.value.buttonsList) {
+    normalizedButtonPropsList[key] = {
+      ...defaultButtonPropsList,
+      ...formattedList.value.buttonsList[key]
+    }
+  }
+
+  return normalizedButtonPropsList
+})
+
 const btnDropdownProps = computed(() => {
   return {
-    buttonsPropsList: formattedList.value.buttonsList,
+    buttonsPropsList: defaultButtonPropsList.value,
     disable: props.disable,
     useSplit: hasSplit.value
   }

package/src/components/actions-menu/composables/use-options-actions.js

@@ -15,7 +15,6 @@ export default function useOptionsActions ({ props, color }) {
       options: {
         color,
         iconRight: 'sym_r_more_vert',
-        useLabelOnSmallScreen: false,
         ...props.buttonProps,
         label: getLabel({ useLabel: props.useLabel, label: 'Opções' }) // label não pode ser sobrescrita.
       }

package/src/components/app-menu/private/PvAppMenuDropdown.vue

@@ -41,14 +41,16 @@ const props = defineProps({
 const defaultButtonDropdownProps = computed(() => ({
   ...props.buttonDropdownProps,
 
-  buttonProps: {
-    align: 'between',
-    class: 'text-subtitle2',
-    color: 'primary',
-    iconRight: 'sym_r_expand_more',
-    label: props.currentModule.label,
-    useEllipsis: true,
-    useLabelOnSmallScreen: true
+  buttonsPropsList: {
+    modules: {
+      align: 'between',
+      class: 'text-subtitle2',
+      color: 'primary',
+      iconRight: 'sym_r_expand_more',
+      label: props.currentModule.label,
+      useEllipsis: true,
+      useLabelOnSmallScreen: true
+    }
   }
 }))
 

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="qas-btn-dropdown" :class="classes.parent">
-    <div v-if="hasButtons" class="flex">
+    <div v-if="hasButtons" :class="classes.list">
       <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
         <div class="flex">
           <qas-btn :disable="props.disable" v-bind="buttonProps" variant="tertiary" @click="onClick">
@@ -88,6 +88,10 @@ const classes = computed(() => {
 
     menuContent: {
       'q-pa-md': props.useMenuPadding
+    },
+
+    list: {
+      flex: !isSingleButton.value
     }
   }
 })

package/src/components/card/QasCard.vue

@@ -11,7 +11,7 @@
         <qas-actions-menu v-if="hasActions" :list="actionsMenuProps" :use-label="false" />
       </div>
 
-      <div class="q-my-sm">
+      <div class="q-my-sm qas-card__content">
         <slot name="default" />
       </div>
 
@@ -97,6 +97,10 @@ const hasFooter = computed(() => hasFooterSlot.value || hasExpansion.value)
 
 <style lang="scss">
 .qas-card {
+  &__content {
+    max-width: 100%;
+  }
+
   &__router {
     &:hover {
       color: $primary;

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

@@ -47,7 +47,7 @@ import {
 import { Bar as BarChart, Doughnut as DoughnutChart, Line as LineChart } from 'vue-chartjs'
 
 // Configurações padrões
-import { charts, colors, font } from './config'
+import { charts, colors as defaultColors, font } from './config'
 
 // Plugins
 import zoomPlugin from 'chartjs-plugin-zoom'
@@ -79,6 +79,11 @@ export default {
       type: Function
     },
 
+    colorsList: {
+      type: Array,
+      default: () => []
+    },
+
     entity: {
       required: true,
       type: String
@@ -161,6 +166,7 @@ export default {
 
       const [dataset] = this.data
       const labels = this.getXAxisData(dataset.data.map(item => item.x))
+      const colors = this.colorsList.length ? this.colorsList : defaultColors
 
       const datasets = this.data.map(({ label, data }, index) => {
         const backgroundColor = this.isDoughnut ? colors : colors.at(index)

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

@@ -10,6 +10,12 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  colors-list:
+    desc: Lista de cores personalizadas para utilizar nos gráficos
+    default: []
+    type: Array,
+    examples: ['#34B53A', '#016DD9', '#FFB200', '#F62D1B']
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true

package/src/components/expansion-item/QasExpansionItem.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="qas-expansion-item" :class="errorClasses">
+    <qas-box class="qas-expansion-item__box">
+      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none" :label="props.label">
+        <template #header>
+          <slot name="header">
+            <div class="full-width">
+              <div class="items-center q-col-gutter-sm row">
+                <slot name="label">
+                  <h5 class="col-auto text-h5 text-weight-medium">
+                    {{ props.label }}
+                  </h5>
+                </slot>
+
+                <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>
+            </div>
+          </slot>
+        </template>
+
+        <q-separator class="q-my-md" />
+
+        <slot name="content">
+          <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" use-inline />
+        </slot>
+      </q-expansion-item>
+    </qas-box>
+
+    <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
+      {{ props.errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasExpansionItem' })
+
+const props = defineProps({
+  badges: {
+    type: Array,
+    default: () => []
+  },
+
+  error: {
+    type: Boolean
+  },
+
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const hasError = computed(() => props.error || !!props.errorMessage)
+
+const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
+
+const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+</script>
+
+<style lang="scss">
+.qas-expansion-item {
+  $root: &;
+
+  &--error {
+    #{$root}__box {
+      border: 2px solid $negative;
+    }
+
+    #{$root}__error-message {
+      padding-left: 12px; // espaçamento igual ao de erro do quasar.
+    }
+  }
+
+  .q-item {
+    margin-top: 0;
+    min-height: auto;
+  }
+
+  .q-item:hover {
+    color: initial !important;
+  }
+}
+</style>

package/src/components/expansion-item/QasExpansionItem.yml

@@ -0,0 +1,35 @@
+type: component
+
+meta:
+  desc: Componente de card expansivo, wrapper do QExpansionItem(https://quasar.dev/vue-components/expansion-item)
+
+props:
+  badges:
+    desc: Lista de badges que serão exibidas na parte superior do card.
+    type: Array
+
+  error:
+    desc: Booleano que caso seja true o card passa a ter uma borda vermelha.
+    type: Boolean
+
+  error-message:
+    desc: Mensagem de erro onde será exibida na parte inferior do card.
+    type: String
+
+  label:
+    desc: Titulo exibido na parte superior do card.
+    type: String
+
+  grid-generator-props:
+    desc: Propriedades que serão repassadas para o QasGridGenerator.
+    type: Object
+
+slots:
+  header:
+    desc: 'Slot para substituir o conteúdo do header'
+
+  label:
+    desc: 'Slot para substituir o conteúdo da label do header.'
+
+  content:
+    desc: 'Slot para substituir o conteúdo principal do card.'

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

@@ -2,7 +2,7 @@
   <div :class="fieldsetClasses">
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
       <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
-        <qas-label :label="fieldsetItem.label" />
+        <qas-label :label="fieldsetItem.label" :margin="getLabelMargin(fieldsetItem)" />
         <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
       </slot>
 
@@ -26,7 +26,8 @@
 </template>
 
 <script setup>
-import useGenerator, { baseProps, gutterValidator } from '../../composables/private/use-generator'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
+import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { Spacing } from '../../enums/Spacing'
 import { computed } from 'vue'
 
@@ -179,4 +180,8 @@ function useFieldset ({ props }) {
     hasFieldset
   }
 }
+
+function getLabelMargin (fieldsetItem) {
+  return fieldsetItem.description ? 'sm' : 'md'
+}
 </script>

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

@@ -8,7 +8,7 @@ props:
     desc: Colunas do grid de cada campo.
     default: col-6
     type: [Array, String, Object]
-    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
+    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12", "{ sm: 6, md: 12 }"]
 
   disable:
     desc: Deixa os campos desabilitados enviando a prop "disable" para cada campo.
@@ -42,13 +42,13 @@ props:
     desc: Espaçamento entre rótulos (label).
     default: lg
     type: [String, Boolean]
-    examples: [xs, sm, md, lg, xl, false]
+    examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
 
   gutter:
     desc: Espaçamento entre colunas.
     default: lg
     type: [String, Boolean]
-    examples: [xs, sm, md, lg, xl, false]
+    examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
 
   model-value:
     desc: Model do componente, usado para o v-model.
@@ -63,6 +63,9 @@ props:
     default: []
     type: Array
 
+  use-common-columns:
+    desc: Utilizado quando passar a estrutura da prop "columns" sendo um objeto onde seus breakpoints serão replicados para todos fields.
+
 slots:
   'field-[nome-da-chave]':
     desc: Acessa o slot de um campo especifico.

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

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

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

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

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

@@ -78,7 +78,7 @@ props:
     desc: Espaçamento entre colunas do formulário.
     default: lg
     type: [String, Boolean]
-    examples: [xs, sm, md, lg, xl, false]
+    examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, false]
 
   identifier-item-key:
     desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.

package/src/components/select/QasSelect.vue

@@ -194,7 +194,7 @@ export default {
 
         if (this.fuse || this.hasFuse) this.setFuse()
 
-        this.mx_filteredOptions = this.options
+        this.mx_filteredOptions = [...this.options]
       },
 
       immediate: true

package/src/components/stepper/QasStepper.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="qas-stepper" :class="classes">
+    <q-stepper ref="stepper" v-model="model" active-color="primary" active-icon="none" animated :contracted="screen.untilLarge" done-color="primary" done-icon="none" flat :header-class="headerClass" inactive-color="grey-6" keep-alive>
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="name" v-bind="getContext(context)" />
+      </template>
+    </q-stepper>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
+import useScreen from '../../composables/use-screen'
+
+defineOptions({ name: 'QasStepper' })
+
+const props = defineProps({
+  disable: {
+    type: Boolean
+  },
+
+  modelValue: {
+    type: [String, Number],
+    default: 0
+  },
+
+  spacing: {
+    default: Spacing.Lg,
+    type: [String, Boolean],
+    validator: gutterValidator
+  }
+})
+
+const stepper = ref(null)
+
+const screen = useScreen()
+
+const emit = defineEmits(['update:modelValue'])
+
+defineExpose({ next, previous, goTo })
+
+const model = computed({
+  get () {
+    return props.modelValue
+  },
+
+  set (modelValue) {
+    return emit('update:modelValue', modelValue)
+  }
+})
+
+const classes = computed(() => ({ 'qas-stepper--disable': props.disable }))
+
+const headerClass = computed(() => `text-subtitle1 q-pb-${props.spacing}`)
+
+function getContext (context) {
+  return {
+    ...context,
+    next,
+    previous
+  }
+}
+
+function goTo (step) {
+  stepper.value.goTo(step)
+}
+
+function next () {
+  if (props.disable) return
+
+  stepper.value.next()
+}
+
+function previous () {
+  if (props.disable) return
+
+  stepper.value.previous()
+}
+</script>
+
+<style lang="scss">
+.qas-stepper {
+  .q-stepper {
+    background-color: transparent;
+
+    &__tab {
+      padding: 0;
+    }
+
+    &__caption {
+      @include set-typography($caption);
+      color: $grey-6;
+    }
+  }
+
+  &--disable {
+    .q-stepper {
+      &__title {
+        color: $grey-6;
+      }
+
+      &__line::after,
+      &__line::before,
+      &__dot {
+        background-color: $grey-6 !important;
+      }
+    }
+  }
+
+  .q-stepper--horizontal .q-stepper__line::before,
+  .q-stepper--horizontal .q-stepper__line::after {
+    height: 4px;
+    border-radius: var(--qas-generic-border-radius);
+  }
+
+  .q-stepper__header--standard-labels .q-stepper__tab {
+    min-height: auto;
+  }
+
+  .q-stepper__tab:nth-child(1),
+  .q-stepper__tab--done {
+
+    .q-stepper__line::after,
+    .q-stepper__line::before {
+      background-color: var(--q-primary);
+    }
+  }
+
+  .q-stepper__tab:nth-child(2),
+  .q-stepper__tab--active {
+    .q-stepper__line::before {
+      background-color: var(--q-primary);
+    }
+  }
+
+  .q-stepper__nav,
+  .q-stepper__step-inner {
+    padding: 0;
+  }
+
+  .q-stepper__header--contracted .q-stepper__tab:first-child .q-stepper__dot,
+  .q-stepper__header--contracted .q-stepper__tab:last-child .q-stepper__dot {
+    transform: translateX(0);
+  }
+
+  .q-focus-helper {
+    display: none;
+  }
+}
+</style>

package/src/components/stepper/QasStepper.yml

@@ -0,0 +1,36 @@
+type: component
+
+meta:
+  desc: Componente de stepper.
+
+props:
+  disable:
+    desc: Deixa o componente desabilitado.
+    default: false
+    type: Boolean
+
+  spacing:
+    desc: Espaçamento entre o stepper e o conteúdo da página.
+    default: lg
+    type: [String, Boolean]
+    examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
+
+  model-value:
+    desc: Model do componente, responsável por controlar em qual step deverá ser exibido.
+    model: true
+    type: [Number, String]
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Valor do mode-value.
+        type: [Number, String]
+
+methods:
+  'next: () => void':
+    desc: Avança o stepper para o prõximo step.
+
+  'previous: () => void':
+    desc: Volta o stepper para o step anterior.

package/src/components/stepper-form-view/QasStepperFormView.vue

@@ -0,0 +1,84 @@
+<template>
+  <qas-stepper ref="stepper" v-model="model" v-bind="stepperProps">
+    <template #default>
+      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName(stepIndex)" v-bind="stepPropsList[stepIndex]">
+        <component :is="step.component" />
+      </q-step>
+    </template>
+  </qas-stepper>
+</template>
+
+<script setup>
+import { ref, provide, computed } from 'vue'
+
+defineOptions({ name: 'QasStepperFormView' })
+
+const props = defineProps({
+  steps: {
+    type: Array,
+    required: true
+  },
+
+  formViewProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  stepperProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const model = defineModel({ type: Number, default: 1 })
+
+const values = ref({})
+const stepPropsList = ref([])
+const stepper = ref(null)
+
+setStepProps({ payload: [...props.steps.map(({ stepProps }) => stepProps)] })
+
+const defaultFormViewProps = computed(() => {
+  return {
+    useBoundary: false,
+    useNotifySuccess: false,
+    ...props.formViewProps
+  }
+})
+
+function setStepProps ({ step, payload }) {
+  if (step) {
+    stepPropsList.value[step - 1] = payload
+  } else {
+    stepPropsList.value = payload
+  }
+}
+
+/*
+* - Merge do payload com objetivo de enviar o payload completo de todos steps no stepper final
+* - É possível ir para um step especifico ou somente ir para o próximo.
+*/
+function nextStep ({ payload = {} }) {
+  Object.assign(values.value, payload)
+
+  stepper.value.next()
+}
+
+function isDone (stepIndex) {
+  return model.value > stepIndex + 1
+}
+
+function getStepName (stepIndex) {
+  return stepIndex + 1
+}
+
+provide('stepper', {
+  stepperModel: model,
+  formViewProps: defaultFormViewProps,
+  goTo: step => stepper.value.goTo(step),
+  next: nextStep,
+  previous: () => stepper.value.previous(),
+  setStepProps,
+  stepsValues: values
+})
+</script>

package/src/components/stepper-form-view/QasStepperFormView.yml

@@ -0,0 +1,58 @@
+type: component
+
+meta:
+  desc: Componente para steppers de formulário.
+
+props:
+  steps:
+    desc: Lista de step, cada item possuindo "stepProps" e "component".
+    required: true
+    type: Array
+
+  form-view-props:
+    desc: Propriedades que serão repassadas para os componentes, podendo repassar coisas que serão comúm entre as páginas, como "entity", "mode".
+    type: Object
+
+  stepper-props:
+    desc: Propriedades que serão repassadas para o QasStepper.
+    type: Object
+
+inject:
+  stepper-model:
+    desc: Model do stepper caso precise recuperar o step atual para alguma lógica. Possui reatividade, portanto para acessar é necessário do ".value"
+    type: Number
+
+  form-view-props:
+    desc: Propriedades do QasFormView que são comuns entre todos os steppers. Possui reatividade, portanto para acessar é necessário do ".value"
+    type: Object
+
+  'goTo: (step) => void':
+    desc: Função usada para mudar o step atual.
+    params:
+      step:
+        desc: Nome do step que deseja visualizar.
+        type: Number
+
+  'next: (payload) => void':
+    desc: Avança para o próximo step.
+    params:
+      payload:
+        desc: Payload do formulário atual, que será mergeado no "stepperValues", com a intenção de guardar o payload completo para ser enviado no último step.
+        type: Object
+
+  'previous: () => void':
+    desc: Volta para o step anterior.
+
+  'setStepProps: () => void':
+    desc: Altera as propriedades de um step específico caso precise que seja alterado com base em alguma lógica atual da página.
+    params:
+      step:
+        desc: Step que deseja alterar as propriedades
+        type: Number
+
+      payload:
+        desc: Propriedades do step como "title", "prefix", "caption", entre outros.
+
+  steps-values:
+    desc: Payload com todos valores que foram mergeados através da função "next" ao decorrer dos avanços dos steps. É usado para você recuperar no último step com intenção de enviar o payload completo de todos step para a API. Possui reatividade, portanto para acessar é necessário do ".value"
+    type: Object

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

@@ -1,5 +1,6 @@
 import { computed } from 'vue'
 import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
 
 const IRREGULAR_CLASSES = ['col', 'col-auto', 'fit']
 
@@ -18,21 +19,11 @@ export const baseProps = {
     default: Spacing.Lg,
     type: [String, Boolean],
     validator: gutterValidator
-  }
-}
-
-// TODO: validar a necessidade da prop ser boolean
-/**
- * Valida se o gutter passado respeita os valores do enum Spacing ou é um boolean.
- *
- * @function
- * @param {(string|boolean)} value
- * @returns {boolean}
- */
-export function gutterValidator (value) {
-  const availableSpacings = Object.values(Spacing)
+  },
 
-  return typeof value === 'boolean' || availableSpacings.includes(value)
+  useCommonColumns: {
+    type: Boolean
+  }
 }
 
 /**
@@ -99,7 +90,11 @@ export default function ({ props = {} }) {
     for (const key in formattedColumns) {
       const value = formattedColumns[key]
 
-      classes.push(IRREGULAR_CLASSES.includes(value) ? value : `${profiles[key]}-${value}`)
+      if (IRREGULAR_CLASSES.includes(value)) {
+        classes.push(value === 'col' ? profiles[key] : value)
+      } else {
+        classes.push(`${profiles[key]}-${value}`)
+      }
     }
 
     return [...classes, renamedClasses]
@@ -116,10 +111,23 @@ export default function ({ props = {} }) {
    * @private
   */
   function _handleColumnsByField ({ index, isGridGenerator }) {
+    /*
+     * Quando é passado o columns como um único objeto que será replicado para todos fields.
+     */
+    if (props.useCommonColumns && Object.keys(props.columns).length) {
+      return _getBreakpoint(props.columns)
+    }
+
+    /*
+     * Quando não é passado columns, retornará o default.
+     */
     if (!props.columns[index]) {
       return _getDefaultColumnClass(isGridGenerator)
     }
 
+    /*
+     * Quando é passado um objeto por field.
+     */
     return _getBreakpoint(props.columns[index])
   }
 

package/src/css/variables/spacing.scss

@@ -45,6 +45,16 @@ $space-3xl: (
   y: ($space-y-base * 3) // 48px
 );
 
+$space-4xl: (
+  x: ($space-x-base * 3.5),// 56px
+  y: ($space-y-base * 3.5) // 56px
+);
+
+$space-5xl: (
+  x: ($space-x-base * 4), // 64px
+  y: ($space-y-base * 4) // 64px
+);
+
 $spaces: (
   none: $space-none, // 0px
   xs: $space-xs, // 4px
@@ -53,7 +63,9 @@ $spaces: (
   lg: $space-lg, // 24px
   xl: $space-xl, // 32px
   2xl: $space-2xl, // 40px
-  3xl: $space-3xl // 48px
+  3xl: $space-3xl, // 48px
+  4xl: $space-4xl, // 56px
+  5xl: $space-5xl // 64px
 );
 
 $flex-gutter-xs : map.get($space-xs, 'x');
@@ -63,6 +75,8 @@ $flex-gutter-lg : map.get($space-lg, 'x');
 $flex-gutter-xl : map.get($space-xl, 'x');
 $flex-gutter-2xl : map.get($space-2xl, 'x');
 $flex-gutter-3xl : map.get($space-3xl, 'x');
+$flex-gutter-4xl : map.get($space-4xl, 'x');
+$flex-gutter-5xl : map.get($space-5xl, 'x');
 
 $flex-gutter: (
   none: 0, // 0px
@@ -71,8 +85,10 @@ $flex-gutter: (
   md: $flex-gutter-md, // 16px
   lg: $flex-gutter-lg, // 24px
   xl: $flex-gutter-xl, // 32px
-  2xl: $flex-gutter-2xl, // 48px
-  3xl: $flex-gutter-3xl // 40px
+  2xl: $flex-gutter-2xl, // 40px
+  3xl: $flex-gutter-3xl, // 48px
+  4xl: $flex-gutter-4xl, // 56px
+  5xl: $flex-gutter-5xl // 64px
 );
 
 :root {

package/src/enums/Spacing.js

@@ -14,6 +14,8 @@
  *  Xl: 'xl',
  *  '2xl': '2xl',
  *  '3xl': '3xl',
+ *  '4xl': '4xl',
+ *  '5xl': '5xl'
  * }}
 */
 export const Spacing = {
@@ -24,7 +26,9 @@ export const Spacing = {
   Lg: 'lg',
   Xl: 'xl',
   '2xl': '2xl',
-  '3xl': '3xl'
+  '3xl': '3xl',
+  '4xl': '4xl',
+  '5xl': '5xl'
 }
 
 /**
@@ -40,9 +44,11 @@ export const Spacing = {
  *  Sm: '8px',
  *  Md: '16px',
  *  Lg: '24px',
- *  Xl: '32px',
+ *  Xl: '52px',
  *  '2xl': '40px',
- *  '3xl': '48px'
+ *  '3xl': '48px',
+ *  '4xl': '56px',
+ *  '5xl': '64px'
  * }}
 */
 export const SpacingWithUnit = {
@@ -53,5 +59,7 @@ export const SpacingWithUnit = {
   Lg: '24px',
   Xl: '32px',
   '2xl': '40px',
-  '3xl': '48px'
+  '3xl': '48px',
+  '4xl': '56px',
+  '5xl': '64px'
 }

package/src/helpers/private/gutter-validator.js

@@ -0,0 +1,15 @@
+import { Spacing } from '../../enums/Spacing'
+
+// TODO: validar a necessidade da prop ser boolean
+/**
+ * Valida se o gutter passado respeita os valores do enum Spacing ou é um boolean.
+ *
+ * @function
+ * @param {(string|boolean)} value
+ * @returns {boolean}
+ */
+export function gutterValidator (value) {
+  const availableSpacings = Object.values(Spacing)
+
+  return typeof value === 'boolean' || availableSpacings.includes(value)
+}

package/src/vue-plugin.js

@@ -23,6 +23,7 @@ import QasDialog from './components/dialog/QasDialog.vue'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
 import QasDrawer from './components/drawer/QasDrawer.vue'
 import QasEmptyResultText from './components/empty-result-text/QasEmptyResultText.vue'
+import QasExpansionItem from './components/expansion-item/QasExpansionItem.vue'
 import QasField from './components/field/QasField.vue'
 import QasFilters from './components/filters/QasFilters.vue'
 import QasFormGenerator from './components/form-generator/QasFormGenerator.vue'
@@ -57,6 +58,8 @@ import QasSignatureUploader from './components/signature-uploader/QasSignatureUp
 import QasSingleView from './components/single-view/QasSingleView.vue'
 import QasSortable from './components/sortable/QasSortable.vue'
 import QasStatus from './components/status/QasStatus.vue'
+import QasStepper from './components/stepper/QasStepper.vue'
+import QasStepperFormView from './components/stepper-form-view/QasStepperFormView.vue'
 import QasTableGenerator from './components/table-generator/QasTableGenerator.vue'
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
@@ -113,6 +116,7 @@ async function install (app) {
   app.component('QasDialogRouter', QasDialogRouter)
   app.component('QasDrawer', QasDrawer)
   app.component('QasEmptyResultText', QasEmptyResultText)
+  app.component('QasExpansionItem', QasExpansionItem)
   app.component('QasField', QasField)
   app.component('QasFilters', QasFilters)
   app.component('QasFormGenerator', QasFormGenerator)
@@ -147,6 +151,8 @@ async function install (app) {
   app.component('QasSingleView', QasSingleView)
   app.component('QasSortable', QasSortable)
   app.component('QasStatus', QasStatus)
+  app.component('QasStepper', QasStepper)
+  app.component('QasStepperFormView', QasStepperFormView)
   app.component('QasTableGenerator', QasTableGenerator)
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
@@ -204,6 +210,7 @@ export {
   QasDialogRouter,
   QasDrawer,
   QasEmptyResultText,
+  QasExpansionItem,
   QasField,
   QasFilters,
   QasFormGenerator,
@@ -238,6 +245,8 @@ export {
   QasSingleView,
   QasSortable,
   QasStatus,
+  QasStepper,
+  QasStepperFormView,
   QasTableGenerator,
   QasTabsGenerator,
   QasTextTruncate,