criando componente para wizard

components/@mixins/MixinNavigationTabs.js

@@ -0,0 +1,6 @@
+import { uniqid } from 'genesis/support/utils'
+
+export default {
+  props: {},
+  methods: {}
+}

components/@mixins/MixinNavigationWizard.js

@@ -0,0 +1,13 @@
+import { uniqid } from 'genesis/support/utils'
+
+export default {
+  props: {},
+  methods: {
+    nextStep () {
+      this.$refs.form.$refs.stepper.next()
+    },
+    previousStep () {
+      this.$refs.form.$refs.stepper.previous()
+    }
+  }
+}

components/crud/Form.vue

@@ -9,13 +9,13 @@
 
     <hr v-if="top">
     <slot name="content">
-      <component :is="content" ref="form" v-bind="{tabs, tab, fields, data, readonly, change, watches, debug}"
+      <component :is="content" ref="form" v-bind="{tabs, tab, steps, step, fields, data, readonly, change, watches, debug}"
                 @form~input="input" @form~valid="valid"/>
     </slot>
     <hr v-if="bottom">
 
     <slot v-if="bottom" name="bottom">
-      <app-button-bar :buttons="buttons.top" :handler="handler" :direction="direction" :record="data"/>
+      <app-button-bar :buttons="buttons.bottom" :handler="handler" :direction="direction" :record="data"/>
     </slot>
 
     <slot name="footer"/>
@@ -34,8 +34,12 @@
 
 <script type="text/javascript">
   import AppForm from 'genesis/components/form/AppForm.vue'
+  import AppWizard from 'genesis/components/form/AppWizard.vue'
+  import AppFormTabs from 'genesis/components/form/AppFormTabs.vue'
   import AppButtonBar from 'genesis/components/button/AppButtonBar.vue'
   import MixinNavigation from 'genesis/components/@mixins/MixinNavigation'
+  import MixinNavigationWizard from 'genesis/components/@mixins/MixinNavigationWizard'
+  import MixinNavigationTabs from 'genesis/components/@mixins/MixinNavigationTabs'
   import { MixinComputed, MixinData, MixinMethods, MixinProps } from './model'
   import { MixinForm } from './model/form'
 
@@ -45,11 +49,18 @@
    */
   const AppCrudForm = {
     mixins: [
-      MixinComputed, MixinData, MixinMethods, MixinProps, MixinNavigation, MixinForm
+      MixinComputed,
+      MixinData,
+      MixinMethods,
+      MixinProps,
+      MixinNavigation,
+      MixinNavigationWizard,
+      MixinNavigationTabs,
+      MixinForm
     ],
     name: 'app-crud-form',
     components: {
-      AppForm, AppButtonBar
+      AppForm, AppFormTabs, AppWizard, AppButtonBar
     }
   }
   export default AppCrudForm

components/crud/Index.vue

@@ -19,6 +19,17 @@
       styles: {
         default: () => ({})
       }
+    },
+    methods: {
+      enviroment () {
+        console.log('~> arguments', arguments)
+      }
+    },
+    created () {
+      this.$g.on('app-crud-enviroment', this.enviroment())
+    },
+    destroyed () {
+      this.$g.off('app-crud-enviroment')
     }
   }
 </script>

components/crud/model/form/MixinForm.js

@@ -60,6 +60,14 @@ export default {
       type: String,
       default: () => ''
     },
+    steps: {
+      type: Array,
+      default: () => ([])
+    },
+    step: {
+      type: String,
+      default: () => ''
+    },
     change: {
       type: Function
     },
@@ -177,6 +185,12 @@ export default {
     if (this.scopes[this.scope]) {
       this.readonly = this.scopes[this.scope].readonly
     }
+    if (this.tabs.length) {
+      this.$g.emit('app-crud-enviroment', 'tabs')
+    }
+    if (this.steps.length) {
+      this.$g.emit('app-crud-enviroment', 'steps')
+    }
     this.renderAll()
   },
   mounted () {

components/form/AppForm.vue

@@ -11,6 +11,7 @@
                    @input="formInput(schema.field, arguments)" @event="formEvent"></component>
       </div>
     </div>
+
     <div v-else class="form">
       <component v-for="schema in schemas" :key="schema.field" :is="schema.component"
                  v-bind="schema" v-model="record[schema.field]"
@@ -36,22 +37,11 @@
       this.updateComponents()
       this.updateSchemas()
       this.updateRecord()
-
-      this.tabSeletecd = this.tab
-      if (!this.tabSeletecd) {
-        this.tabSeletecd = (Array.isArray(this.tabs) && this.tabs[0]) ? this.tabs[0].name : ''
-      }
-      if (this.$route.query.tab) {
-        this.tabSeletecd = this.$route.query.tab
-      }
     }
   }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus" scoped>
   .app-form
     font-family Roboto
-    .tab-content
-      padding 20px 0
-      border-top 1px solid #ddd
 </style>

components/form/AppFormTabs.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="app-form">
+
+    <div class="tabs">
+      <q-tabs v-model="tabSeletecd" inverted>
+        <q-tab v-for="tab in tabs" :key="tab.name" slot="title" v-bind="tab"/>
+      </q-tabs>
+      <div class="tab-content form" v-for="tab in tabs" v-show="tab.name === tabSeletecd">
+        <component v-for="schema in components[tab.name]" :key="schema.field" :is="schema.component"
+                   v-bind="schema" v-model="record[schema.field]"
+                   @input="formInput(schema.field, arguments)" @event="formEvent"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  import appForm from './AppForm'
+
+  export default {
+    name: 'app-tabs',
+    extends: appForm,
+    created () {
+      this.tabSeletecd = this.tab
+      if (!this.tabSeletecd) {
+        this.tabSeletecd = (Array.isArray(this.tabs) && this.tabs[0]) ? this.tabs[0].name : ''
+      }
+      if (this.$route.query.tab) {
+        this.tabSeletecd = this.$route.query.tab
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .app-form
+    .tab-content
+      padding 20px 0
+      border-top 1px solid #ddd
+</style>

components/form/AppWizard.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="app-form">
+    <q-stepper v-model="currentStep" ref="stepper">
+      <q-step v-for="step in steps" :name="step.name"
+              :key="step.name" :title="step.title" :subtitle="step.subtitle" :icon="step.icon">
+        <component v-for="schema in components[step.name]" :key="schema.field" :is="schema.component"
+                   v-bind="schema" v-model="record[schema.field]"
+                   @input="formInput(schema.field, arguments)" @event="formEvent"></component>
+        <q-stepper-navigation>
+          <q-btn :disable="step.navigation.back === ''"
+                 outline small color="primary" @click="currentStep = step.navigation.back">Voltar</q-btn>
+          <q-btn  :disable="step.navigation.next === ''"
+                  outline small color="primary" @click="currentStep = step.navigation.next">Avançar</q-btn>
+        </q-stepper-navigation>
+      </q-step>
+      <q-stepper-navigation>
+        <q-btn flat @click="$refs.stepper.previous()">Back</q-btn>
+        <q-btn @click="$refs.stepper.next()">Next</q-btn>
+      </q-stepper-navigation>
+    </q-stepper>
+  </div>
+</template>
+
+<script type="text/javascript">
+  import appForm from './AppForm'
+  export default {
+    name: 'app-wizard',
+    extends: appForm,
+    created () {
+      this.currentStep = this.step
+      if (!this.currentStep) {
+        this.currentStep = (Array.isArray(this.steps) && this.step[0]) ? this.step[0].name : ''
+      }
+      if (this.$route.query.step) {
+        this.currentStep = this.$route.query.step
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+    .q-stepper
+      box-shadow none
+      .q-stepper-header
+        box-shadow none
+      .q-stepper-step
+        .q-stepper-step-content
+          .q-stepper-step-inner
+            padding 10px 3px !important
+</style>

components/form/model/mixins/MixinData.js

@@ -4,6 +4,7 @@ export default {
     schemas: {},
     record: {},
     tabSeletecd: '',
+    currentStep: '',
     modified: false
   })
 }

components/form/model/mixins/MixinMethods.js

@@ -58,6 +58,11 @@ export default {
           components[tab.name] = this.fields.filter(field => field.tab === tab.name).reduce(arrayToObject, {})
         })
       }
+      if (this.steps.length) {
+        this.steps.forEach(step => {
+          components[step.name] = this.fields.filter(field => field.step === step.name).reduce(arrayToObject, {})
+        })
+      }
       this.components = components
     },
     /**

components/form/model/mixins/MixinProps.js

@@ -8,6 +8,14 @@ export default {
       type: String,
       default: () => ''
     },
+    steps: {
+      type: Array,
+      default: () => ([])
+    },
+    step: {
+      type: String,
+      default: () => ''
+    },
     fields: {
       type: Array,
       default: () => ([])

components/layout/AppLayout.vue

@@ -21,7 +21,7 @@
 
         <slot name="header-content"></slot>
 
-        <q-btn flat @click="">
+        <q-btn flat @click="" v-if="getDashboardOptions === !undefined">
           <q-icon name="more_vert"></q-icon>
           <q-popover ref="popover" class="q-popover-menu">
             <q-list item-separator highlight link>

plugin/index.js

@@ -1,3 +1,4 @@
+import { Events } from 'quasar-framework'
 import { get, set } from 'lodash'
 import { uniqid } from 'genesis/support/utils'
 import router from 'genesis/infra/router'
@@ -28,8 +29,12 @@ const browse = (path, query = {}, changer = '~') => {
   window.setTimeout(() => router.push({path, query}), 100)
 }
 
+const on = (name, callback) => Events.$on(name, callback)
+const off = (name) => Events.$off(name)
+const emit = (name, parameters) => Events.$emit(name, parameters)
+
 const genesis = {
-  get, set, browse
+  get, set, browse, on, off, emit
 }
 
 /**

support/model/fields.js

@@ -70,6 +70,10 @@ export const standard = {
     this.form.tab = name
     return this
   },
+  $step (name) {
+    this.form.step = name
+    return this
+  },
   $disabled () {
     this.form.disabled = true
     return this