Merge branch 'release/v1.0.0'

Author: johnnymillergh

.env

@@ -2,4 +2,4 @@
 VUE_APP_PACKAGE_JSON=''
 
 # TAG must be corresponding with the version tag in package.json, need to modify it when new version releases
-TAG=0.1.2
+TAG=1.0.0

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.0.0](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v0.1.2...v1.0.0) (2019-12-30)
+
+
+### Features
+
+* **$App:** add AppUtil for getting package.json information ([566e956](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/566e95687c7db1283473806653c90dba6c8d76f3))
+
+
+### BREAKING CHANGES
+
+* **$App:** add AppUtil for getting package.json information
+
+
+
 ## [0.1.2](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v0.1.1...v0.1.2) (2019-12-30)
 
 

README.md

@@ -1,12 +1,12 @@
-![TypeScript Playground Feature Graphics](https://raw.githubusercontent.com/johnnymillergh/MaterialLibrary/master/vuetiify-typescript-playground/vuetify-typescript-playground-blue-background.png)
+![TypeScript Playground Feature Graphics](https://raw.githubusercontent.com/johnnymillergh/MaterialLibrary/master/vuetify-typescript-playground/vuetify-typescript-playground-blue-background.png)
 
-[![GitHub release](https://img.shields.io/github/release/johnnymillergh/vuetify-typescript-playground.svg)](https://github.com/johnnymillergh/vuetiify-typescript-playground/releases)
+[![GitHub release](https://img.shields.io/github/release/johnnymillergh/vuetify-typescript-playground.svg)](https://github.com/johnnymillergh/vuetify-typescript-playground/releases)
 [![Build Status](https://travis-ci.com/johnnymillergh/vuetify-typescript-playground.svg?branch=master)](https://travis-ci.com/johnnymillergh/typescript-playground)
 [![GitHub issues](https://img.shields.io/github/issues/johnnymillergh/vuetify-typescript-playground)](https://github.com/johnnymillergh/vuetify-typescript-playground/issues)
-[![GitHub forks](https://img.shields.io/github/forks/johnnymillergh/vuetiify-typescript-playground)](https://github.com/johnnymillergh/vuetiify-typescript-playground/network)
-[![GitHub stars](https://img.shields.io/github/stars/johnnymillergh/vuetiify-typescript-playground)](https://github.com/johnnymillergh/vuetiify-typescript-playground/stargazers)
-[![GitHub license](https://img.shields.io/github/license/johnnymillergh/vuetiify-typescript-playground)](https://github.com/johnnymillergh/vuetiify-typescript-playground/blob/master/LICENSE)
-[![Twitter](https://img.shields.io/twitter/url/https/github.com/johnnymillergh/vuetiify-typescript-playground?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fjohnnymillergh%2Fvuetiify-typescript-playground)
+[![GitHub forks](https://img.shields.io/github/forks/johnnymillergh/vuetiify-typescript-playground)](https://github.com/johnnymillergh/vuetify-typescript-playground/network)
+[![GitHub stars](https://img.shields.io/github/stars/johnnymillergh/vuetiify-typescript-playground)](https://github.com/johnnymillergh/vuetify-typescript-playground/stargazers)
+[![GitHub license](https://img.shields.io/github/license/johnnymillergh/vuetiify-typescript-playground)](https://github.com/johnnymillergh/vuetify-typescript-playground/blob/master/LICENSE)
+[![Twitter](https://img.shields.io/twitter/url/https/github.com/johnnymillergh/vuetiify-typescript-playground?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fjohnnymillergh%2Fvuetify-typescript-playground)
 
 # Vuetify TypeScript Playground
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-typescript-playground",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "description": "Vuetify Typescript Playground",
   "author": {

src/App.vue

@@ -1,12 +1,13 @@
 <template>
-  <v-app>
+  <v-app id="app-container">
     <v-app-bar app color="primary" dark>
       <div class="d-flex align-center">
         <v-img alt="Vuetify Logo" class="shrink mr-2" contain
                src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition"
                width="40"/>
-        <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100"
-               src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="100"/>
+        <span id="app-name">{{ appName }}</span>
+        <span id="version">{{ version }}</span>
+        <span id="environment">{{ environment }}</span>
       </div>
       <v-spacer/>
       <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
@@ -29,17 +30,29 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { AppUtil } from '@/utils/app-util.ts'
 
 export default Vue.extend({
   name: 'App',
   data: () => ({
-    //
-  })
+    appName: '',
+    version: '',
+    environment: ''
+  }),
+  mounted (): void {
+    this.appName = AppUtil.getName()
+      .replace(/-/g, ' ')
+      .split(' ')
+      .map(word => word[0].toUpperCase() + word.substr(1).toLowerCase())
+      .join(' ')
+    this.version = AppUtil.getVersionInfo()
+    this.environment = `Environment: ${process.env.NODE_ENV} (${process.env.VUE_APP_ENV})`
+  }
 })
 </script>
 
 <!--suppress CssUnusedSymbol -->
-<style scoped>
+<style lang="scss" scoped>
 .fade-transform-leave-active, .fade-transform-enter-active {
   transition: all .5s;
 }
@@ -53,4 +66,26 @@ export default Vue.extend({
   opacity: 0;
   transform: translateX(30px);
 }
+
+#app-container {
+  #app-name {
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  #version {
+    text-align: right;
+    font-size: 32px;
+    position: relative;
+    left: 8px;
+  }
+
+  #environment {
+    text-align: right;
+    font-size: 18px;
+    position: relative;
+    top: 4px;
+    left: 16px;
+  }
+}
 </style>

src/utils/app-util.ts

@@ -0,0 +1,44 @@
+export class AppUtil {
+  private static PROJECT_PROPERTY = JSON.parse(unescape(process.env.VUE_APP_PACKAGE_JSON))
+
+  /**
+   * Get project property object.
+   * @author Johnny Miller (鍾俊), e-mail: johnnysviva@outlook.com
+   * @return {any} An object contains project properties.
+   */
+  static getProjectProperty = (): Object => {
+    return AppUtil.PROJECT_PROPERTY
+  }
+
+  /**
+   * Get the name of app.
+   * @return {String} Name of app
+   */
+  static getName = (): string => {
+    return AppUtil.PROJECT_PROPERTY.name
+  }
+
+  /**
+   * Get the version of app.
+   * @return {String} Version of app
+   */
+  static getVersionInfo = (): string => {
+    return AppUtil.PROJECT_PROPERTY.version
+  }
+
+  /**
+   * Get the description of app.
+   * @return {String} Description of app
+   */
+  static getDescription = (): string => {
+    return AppUtil.PROJECT_PROPERTY.description
+  }
+
+  /**
+   * Get the author of app.
+   * @return {String} Author of app
+   */
+  static getAuthor = (): string => {
+    return AppUtil.PROJECT_PROPERTY.author
+  }
+}