@bildvitta/quasar-ui-asteroid 3.15.0-beta.10 → 3.15.0-beta.11

package/package.json

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

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/stepper/QasStepper.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 
   modelValue: {
-    type: [Number, String],
+    type: [String, Number],
     default: 0
   },
 
@@ -39,7 +39,7 @@ const screen = useScreen()
 
 const emit = defineEmits(['update:modelValue'])
 
-defineExpose({ next, previous })
+defineExpose({ next, previous, goTo })
 
 const model = computed({
   get () {
@@ -63,6 +63,10 @@ function getContext (context) {
   }
 }
 
+function goTo (step) {
+  stepper.value.goTo(step)
+}
+
 function next () {
   if (props.disable) return
 

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/vue-plugin.js

@@ -58,6 +58,7 @@ 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'
@@ -149,6 +150,7 @@ async function install (app) {
   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)
@@ -241,6 +243,7 @@ export {
   QasSortable,
   QasStatus,
   QasStepper,
+  QasStepperFormView,
   QasTableGenerator,
   QasTabsGenerator,
   QasTextTruncate,