Merge pull request #18 from Lyduz/feature/add-layout-support

add layout support

README.md

@@ -7,6 +7,9 @@
 ```bash
 ├── app
 │   ├── App_Resources
+│   ├── layout
+│   │   ├── default.vue
+│   │   └── index.ts
 │   ├── modules
 │   │   ├── auth
 │   │   │   ├── repository
@@ -72,6 +75,11 @@
 - store/ - contains the modules' vuex store configurations
 - views/ - contains the `view` of the application. The Component/ is also placed here for easy referencing
 
+### layout/
+
+> Contains the layout components that you may use in your pages similar to nuxt's layout directory. <br>
+Please see social and chart module's view for reference.
+
 ### repository/
 
 > Contains the base repository initiliazation. By default, the project uses REST API calls via axios

app/layout/default.vue

@@ -0,0 +1,39 @@
+<template>
+  <Page>
+    <!--header-->
+    <ActionBar>
+      <Label :text="title" class="title" />
+    </ActionBar>
+
+    <!--body-->
+    <StackLayout
+      orientation="vertical"
+      horizontalAlignment="center"
+      verticalAlignment="center"
+    >
+      <slot>
+        <!-- page items will be rendered here -->
+      </slot>
+    </StackLayout>
+  </Page>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class Default extends Vue {
+  @Prop({ default: 'Nitibo' })
+  readonly title?: string
+}
+</script>
+
+<style scoped>
+ActionBar {
+  background-color: #03dac5;
+  color: #000000;
+}
+.title {
+  font-size: 20%;
+}
+</style>

app/layout/index.ts

@@ -0,0 +1,3 @@
+import Default from './default.vue'
+
+export { Default }

app/modules/chart/views/chart.vue

@@ -1,37 +1,25 @@
+<!--This page is using the layout components of nitibo @/layout/default.vue-->
 <template>
-  <Page>
-    <ActionBar>
-      <NavigationButton
-        text="Go Back"
-        android.systemIcon="ic_menu_back"
-        @tap="$navigator.navigate('/home')"
-      />
-      <Label :text="title" class="title" />
-    </ActionBar>
-
-    <StackLayout
-      orientation="vertical"
-      horizontalAlignment="center"
-      verticalAlignment="center"
-    >
-      <Label :text="title" class="header" />
-    </StackLayout>
-  </Page>
+  <Default :title="chart_get_title">
+    <Label :text="chart_get_title" class="header" />
+  </Default>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
+import { Default } from '@/layout'
 
 const STORE_CHART = namespace('chart')
 
-@Component
+@Component({
+  components: {
+    Default,
+  },
+})
 export default class Chart extends Vue {
   @STORE_CHART.Getter('getTitle') chart_get_title!: string
 
-  // data
-  title = 'Chart Page'
-
   mounted(): void {
     console.log(`Mounted: ${this.chart_get_title}`)
   }

app/modules/home/views/home.vue

@@ -1,7 +1,8 @@
+<!--This page is a bare-metal example without using layout components of nitibo-->
 <template>
   <Page>
     <ActionBar>
-      <Label text="Lyduz" class="title" />
+      <Label text="Nitibo" class="title" />
     </ActionBar>
 
     <StackLayout

app/modules/social/views/social.vue

@@ -1,33 +1,24 @@
+<!--This page is using the layout components of nitibo @/layout/default.vue-->
 <template>
-  <Page>
-    <ActionBar>
-      <NavigationButton
-        text="Go Back"
-        android.systemIcon="ic_menu_back"
-        @tap="$navigator.navigate('/home')"
-      />
-      <Label :text="social_get_title" class="title" />
-    </ActionBar>
-
-    <StackLayout
-      orientation="vertical"
-      horizontalAlignment="center"
-      verticalAlignment="center"
-    >
-      <Label :text="social_get_title" class="header" />
-      <Label text="generated via store vuex" />
-    </StackLayout>
-  </Page>
+  <Default :title="social_get_title">
+    <Label :text="social_get_title" class="header" />
+    <Label text="generated via store vuex" />
+  </Default>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { SocialRepository } from '@/modules/social/repository'
+import { Default } from '@/layout'
 
 const STORE_SOCIAL = namespace('social')
 
-@Component
+@Component({
+  components: {
+    Default,
+  },
+})
 export default class Social extends Vue {
   // getter
   @STORE_SOCIAL.Getter('getTitle') social_get_title!: string
@@ -70,13 +61,6 @@ export default class Social extends Vue {
 </script>
 
 <style scoped>
-ActionBar {
-  background-color: #03dac5;
-  color: #000000;
-}
-.title {
-  font-size: 20%;
-}
 .header {
   font-size: 35%;
 }