Chore(app): demo app clean-up

Author: Godofbrowser

Diff for: src/App.vue

@@ -12,7 +12,7 @@ import HelloWorld from './components/HelloWorld.vue'
 
       <nav>
         <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/vue">Vue</RouterLink>
+        <RouterLink to="/comp">Comp</RouterLink>
         <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>

Diff for: src/assets/main.css

@@ -20,16 +20,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

Diff for: src/router/index.ts

@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import VueHomeView from '../views/VueHomeView.vue'
 import IndexView from '../views/IndexView.vue'
 
 const router = createRouter({
@@ -11,9 +10,9 @@ const router = createRouter({
       component: IndexView
     },
     {
-      path: '/vue',
-      name: 'vue',
-      component: VueHomeView
+      path: '/comp',
+      name: 'comp',
+      component: () => import('../views/CompView.vue')
     },
     {
       path: '/about',

Diff for: src/views/AboutView.vue

@@ -1,15 +1,9 @@
+<script setup lang="ts">
+import TheWelcome from '../components/TheWelcome.vue'
+</script>
+
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+  <main>
+    <TheWelcome />
+  </main>
 </template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

Diff for: src/views/CompView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="index">
+    <h1 style="text-align: center;margin-bottom: 35px;margin-top: 35px;">Comp page</h1>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from "vue";
+
+const dialog = inject('$dialog')
+const openDialog = () => dialog.alert('Hello world!')
+</script>
+
+<style>
+@media (min-width: 1024px) {
+  .index {
+    max-width: 700px;
+  }
+}
+</style>

Diff for: src/views/IndexView.vue

@@ -2,24 +2,25 @@
   <div class="index">
     <h1 style="text-align: center;margin-bottom: 35px;margin-top: 35px;">Index page</h1>
     <div style="width: 100%;display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, 200px);justify-content: center">
-      <button class="dg-btn" @click="testBtnHandler('alert')">Click Alert</button>
-      <button class="dg-btn" @click="testBtnHandler('confirm')">Click Confirm</button>
-      <button class="dg-btn" @click="testBtnHandler('soft')">Click Confirm | soft</button>
-      <button class="dg-btn" @click="testBtnHandler('loading')">Click Confirm | loading</button>
-      <button class="dg-btn" @click="testBtnHandler('hard')">Click Confirm | hard</button>
-      <button class="dg-btn" @click="testBtnHandler('prompt')">Click Prompt</button>
+      <button class="dg-btn" @click="testBtnHandler('alert')">Alert</button>
+      <button class="dg-btn" @click="testBtnHandler('confirm')">Confirm</button>
+      <button class="dg-btn" @click="testBtnHandler('prompt')">Prompt</button>
+      <button class="dg-btn" @click="testBtnHandler('soft')">Confirm | soft</button>
+      <button class="dg-btn" @click="testBtnHandler('loading')">Confirm | loading</button>
+      <button class="dg-btn" @click="testBtnHandler('hard')">Confirm | hard</button>
+      <button class="dg-btn" @click="openDialog()">Open from setup</button>
     </div>
     <hr style="margin: 35px 0;" />
     <div style="width: 100%;display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, 200px);justify-content: center">
-      <button class="dg-btn" v-confirm="'Please confirm!'">Click Directive</button>
-      <a href="https://example.com" v-confirm:soft="'Visit external link?'">Example website</a>
-      To see how many seconds have elapsed, click <a href="javascript:" v-confirm="`${secondsElapsed} Seconds`">here</a>
+      <div><button class="dg-btn" v-confirm="'Please confirm!'">Directive</button></div>
+      <div><a href="https://example.com" v-confirm:soft="'Visit external link?'">Example website</a></div>
+      <div>To see how many seconds have elapsed, click <a href="javascript:" v-confirm="`${secondsElapsed} Seconds`">here</a></div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, nextTick, ref} from "vue";
+import {defineComponent, inject, ref} from "vue";
 
 export default defineComponent({
   methods: {
@@ -28,7 +29,12 @@ export default defineComponent({
       this[type]();
     },
     alert() {
-      this.$dialog.alert('Hello world!')
+      this.$dialog.alert({
+        title: 'Request failed',
+        body: 'The requested resource is no longer available. It may have been moved or deleted',
+      }, {
+        okText: 'Dismiss'
+      })
     },
     confirm() {
       this.$dialog.confirm('If you delete this record, it\'ll be gone forever.')
@@ -82,13 +88,15 @@ export default defineComponent({
     },
   },
   setup() {
+    const dialog = inject('$dialog')
+    const openDialog = () => dialog.alert('Hello world!')
     const secondsElapsed = ref(0)
     const tick = () => {
       secondsElapsed.value += 1
       setTimeout(() => tick(), 1000)
     }
     tick()
-    return { secondsElapsed }
+    return { secondsElapsed, openDialog }
   }
 })
 
@@ -97,11 +105,7 @@ export default defineComponent({
 <style>
 @media (min-width: 1024px) {
   .index {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    max-width: 700px;
   }
 
   .dg-btn {