Merge pull request #1085 from bildvitta/feature/stepper

Feature/stepper

CHANGELOG.md

@@ -11,6 +11,10 @@ Neste arquivo (CHANGELOG.MD) você encontrará somente as mudanças referentes a
 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
+### Adicionado
+- `Spacing.js`: Adicionado espaçamentos `4xl e 5xl`.
+- `QasStepper`: Adicionado componente de stepper.
+
 ### Corrigido
 - `QasBtnDropdown`: corrigido classes para o funcionamento do "ellipsis".
 - `QasAppMenu`: corrigido o uso do `QasBtnDropdown`.

docs/src/assets/menu.js

@@ -287,6 +287,10 @@ module.exports = [
         name: 'Status',
         path: '/components/Status'
       },
+      {
+        name: 'Stepper',
+        path: '/components/stepper'
+      },
       {
         name: 'TableGenerator',
         path: '/components/table-generator'

docs/src/examples/QasStepper/Basic.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container spaced">
+    <qas-stepper v-model="model">
+      <template #default="{ next, previous }">
+        <q-step caption="example" :done="model > 1" :name="1" prefix="1" title="Página 1">
+          <div class="q-mb-md">Conteúdo da Página 1</div>
+
+          <div class="column items-start q-gutter-sm">
+            <qas-btn label="Próximo" @click="next" />
+          </div>
+        </q-step>
+
+        <q-step :done="model > 2" :name="2" prefix="2" title="Página 2">
+          <div class="q-mb-md">Conteúdo da Página 2</div>
+
+          <div class="column items-start q-gutter-sm">
+            <qas-btn label="Voltar" @click="previous" />
+            <qas-btn label="Próximo" @click="next" />
+          </div>
+        </q-step>
+
+        <q-step :name="3" prefix="3" title="Página 3">
+          <div class="q-mb-md">Conteúdo da Página 3</div>
+
+          <div class="column items-start q-gutter-sm">
+            <qas-btn label="Voltar" @click="previous" />
+          </div>
+        </q-step>
+      </template>
+    </qas-stepper>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'Basic' })
+
+const model = ref(2)
+</script>

docs/src/examples/QasStepper/StepperWithIcon.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container spaced">
+    <qas-stepper v-model="model" disable>
+      <template #default="{ next, previous }">
+        <q-step caption="example 1" :done="model > 1" icon="sym_r_article" :name="1" title="Página 1">
+          <div class="q-mb-md">Conteúdo da Página 1</div>
+
+          <div class="column items-start q-gutter-sm">
+            <qas-btn label="Próximo" @click="next" />
+          </div>
+        </q-step>
+
+        <q-step caption="example 2" :done="model > 2" icon="sym_r_description" :name="2" title="Página 2">
+          <div class="q-mb-md">Conteúdo da Página 2</div>
+
+          <div class="column items-start q-gutter-sm">
+            <qas-btn label="Voltar" @click="previous" />
+            <qas-btn label="Próximo" @click="next" />
+          </div>
+        </q-step>
+
+        <q-step caption="example 3" icon="sym_r_news" :name="3" title="Página 3">
+          <div class="q-mb-md">Conteúdo da Página 3</div>
+
+          <div class="column items-start q-gutter-sm">
+            <qas-btn label="Voltar" @click="previous" />
+          </div>
+        </q-step>
+      </template>
+    </qas-stepper>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'Basic' })
+
+const model = ref(2)
+</script>

docs/src/pages/components/stepper.md

@@ -0,0 +1,13 @@
+---
+title: QasStepper
+---
+
+Componente wrapper do [QStepper](https://quasar.dev/vue-components/stepper#qstepper-api)
+
+<doc-api file="stepper/QasStepper" name="QasStepper" />
+
+## Uso
+
+<doc-example file="QasStepper/Basic" title="Básico" />
+
+<doc-example file="QasStepper/StepperWithIcon" title="Com ícone" />

docs/src/pages/styles/spacing.md

@@ -11,6 +11,8 @@ Aqui alteramos tamanho default do quasar e criamos nossos próprios tamanhos.
 Atualmente existem:
 - 2xl
 - 3xl
+- 4xl
+- 5xl
 :::
 
 #### Tokens
@@ -23,3 +25,5 @@ Atualmente existem:
 | xl | 32px | --qas-spacing-xl |
 | 2xl `adicional` | 40px | --qas-spacing-2xl |
 | 3xl `adicional` | 48px | --qas-spacing-3xl |
+| 4xl `adicional` | 56px | --qas-spacing-4xl |
+| 5xl `adicional` | 64px | --qas-spacing-5xl |

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

@@ -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'
 

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

@@ -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.

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

@@ -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".

ui/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.

ui/src/components/stepper/QasStepper.vue

@@ -0,0 +1,148 @@
+<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: [Number, String],
+    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 })
+
+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 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>

ui/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.