Change HelloWorld to Welcome

package-lock.json

@@ -13397,9 +13397,9 @@
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
     "vue-class-component": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-6.3.2.tgz",
-      "integrity": "sha512-cH208IoM+jgZyEf/g7mnFyofwPDJTM/QvBNhYMjqGB8fCsRyTf68rH2ISw/G20tJv+5mIThQ3upKwoL4jLTr1A=="
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.0.2.tgz",
+      "integrity": "sha512-8xw/wkZI2tgHcwvkSRC1ax7GeP1CG27wKhedvOAdjdASm05VU4RijGsCYti6s6CzBioBL5BQUmntQQTCsp1wnQ=="
     },
     "vue-cli-plugin-electron-builder": {
       "version": "1.2.0",
@@ -13575,11 +13575,11 @@
       }
     },
     "vue-property-decorator": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-7.3.0.tgz",
-      "integrity": "sha512-HarXfTQ/Nxm4s/APpAaGIGHq5ZzslApImQy8ZrtkfGamw8rUFAVgMS5C50/AQ80+wfw3Wpnf4bNzbmj75m/k2Q==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.1.0.tgz",
+      "integrity": "sha512-TUWpbadApSW/sx9hlbrUq092ULm4E3RkL5X4fFhkiJ88/Y99lVubjh3bd3VbFQ8JRlKaTeqMOKaFHQRzWBCFPg==",
       "requires": {
-        "vue-class-component": "^6.2.0"
+        "vue-class-component": "^7.0.1"
       }
     },
     "vue-style-loader": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "thedesk-vue",
-  "version": "0.1.0",
+  "version": "0.2",
   "private": true,
   "description": "TheDesk is a Mastodon client for PC.",
   "author": {
@@ -22,8 +22,7 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "vue": "^2.6.6",
-    "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^7.0.0"
+    "vue-property-decorator": "^8.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.123",
@@ -66,15 +65,13 @@
   "bugs": {
     "url": "https://github.com/kPherox/TheDesk-Vue/issues"
   },
-  "contributors": [
-    {
-      "name": "kPherox",
-      "url": "https://www.kr-kp.com/",
-      "email": "admin@mail.kr-kp.com"
-    }
-  ],
+  "contributors": [{
+    "name": "kPherox",
+    "url": "https://www.kr-kp.com/",
+    "email": "admin@mail.kr-kp.com"
+  }],
   "homepage": "https://github.com/kPherox/TheDesk-Vue",
   "license": "GPL-3.0",
   "productName": "TheDesk Vue",
   "repository": "github:kPherox/TheDesk-Vue"
-}
+}

src/components/HelloWorld.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://www.npmjs.com/package/vue-cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Welcome.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="welcome">
+    <h1>Welcome TheDesk</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class Welcome extends Vue {}
+</script>=

src/views/About.vue

@@ -10,9 +10,9 @@
       </p>
     </div>
     <dl class="version">
-      <template v-for="(version, i) in versions">
-        <dt :key="'name-'+i">{{ version.name }}</dt>
-        <dd :key="'ver-'+i">{{ version.version }}</dd>
+      <template v-for="(version, name, i) in versions">
+        <dt :key="'name-'+i">{{ name }}</dt>
+        <dd :key="'ver-'+i">{{ version }}</dd>
       </template>
     </dl>
     <div id="copyright">
@@ -21,6 +21,36 @@
   </div>
 </template>
 
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator"
+import { ipcRenderer } from "electron"
+
+type Versions = {[key: string]: string}
+
+@Component
+export default class About extends Vue {
+  public productName: string
+  public homePage: string
+  public copyright: string
+  public versions: Versions
+
+  constructor() {
+    super()
+    let { productName, homePage, copyright, codeName, versions } = ipcRenderer.sendSync('thedesk-info')
+    this.productName = productName
+    this.homePage = homePage
+    this.copyright = copyright
+    this.versions = {
+      "Code Name": codeName,
+      "Internal Version": versions.internal,
+      "Chromium": versions.chrome,
+      "Electron": versions.electron,
+      "Node.js": versions.node,
+    }
+  }
+}
+</script>
+
 <style lang="postcss">
 body {
   margin: 0;
@@ -61,52 +91,4 @@ dl.version {
     line-height: 1.5em;
   }
 }
-</style>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator"
-import { ipcRenderer } from "electron"
-
-interface Version {
-  name: string
-  version: string
-}
-
-@Component
-export default class About extends Vue {
-  public productName: string
-  public homePage: string
-  public copyright: string
-  public versions: Version[]
-
-  constructor() {
-    super()
-    let { productName, homePage, copyright, codeName, versions } = ipcRenderer.sendSync('thedesk-info')
-    this.productName = productName
-    this.homePage = homePage
-    this.copyright = copyright
-    this.versions = [
-      {
-        name: "Code Name",
-        version: codeName,
-      },
-      {
-        name: "Internal Version",
-        version: versions.internal,
-      },
-      {
-        name: "Chromium",
-        version: versions.chrome,
-      },
-      {
-        name: "Electron",
-        version: versions.electron,
-      },
-      {
-        name: "Node.js",
-        version: versions.node,
-      },
-    ]
-  }
-}
-</script>
+</style>

src/views/App.vue

@@ -1,17 +1,17 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="@/assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <Welcome />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from '@/components/HelloWorld.vue';
+import Welcome from '@/components/Welcome.vue';
 
 @Component({
   components: {
-    HelloWorld,
+    Welcome,
   },
 })
 export default class App extends Vue { }