From 33f3b825bf90d2e3b4fb059708f325ea03380706 Mon Sep 17 00:00:00 2001
From: MarcZierle <online@marczierle.com>
Date: Tue, 11 Jan 2022 17:37:12 +0100
Subject: [PATCH] add modal

---
 src/App.vue                   | 16 +++++++++++
 src/components/HelloWorld.vue | 51 ++++++++++++++++++++---------------
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ba930a4..95bc643 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,27 @@
 <template>
+  <n-config-provider :theme="null">
+    <n-message-provider>
   <div id="nav">
     <router-link to="/">Startseite</router-link> |
     <router-link to="/about">Das sind wir</router-link>
   </div>
   <router-view />
+  </n-message-provider>
+  </n-config-provider>
 </template>
 
+<script>
+import { defineComponent } from 'vue'
+import {darkTheme} from 'naive-ui'
+
+export default defineComponent({
+  setup() {
+    return { darkTheme }
+  }
+})
+</script>
+
+
 <style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b1bcda..e97992e 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -5,30 +5,26 @@
       Check me out, BOY!
     </p>
 
-    <n-space vertical>
-    <n-steps :current="status" :status="currentStatus">
-       <n-step
-        title="I Me Mine"
-        description="All through the day, I me mine I me mine, I me mine"
-      />
-      <n-step
-        title="Let It Be"
-        description="When I find myself in times of trouble Mother Mary comes to me"
-      />
-      <n-step
-        title="Come Together"
-        description="Here come old flat top He come grooving up slowly"
-      />
-      <n-step
-        title="Something"
-        description="Something in the way she moves Attracts me like no other lover"
-      />
-    </n-steps>
-    </n-space>
+    
+    <n-button type="primary" @click="showModal = true">Start Me up</n-button>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      preset="dialog"
+      title="Dialog"
+      content="Are you sure?"
+      positive-text="Confirm"
+      @positive-click="onPositiveClick"
+      @negative-click="onNegativeClick"
+      negative-text="Cancel"
+    />
+
     </div>
 </template>
 
 <script>
+import { useMessage } from 'naive-ui'
+
 export default {
   name: "HelloWorld",
   props: {
@@ -36,9 +32,20 @@ export default {
   },
   data() { 
     return {
-      currentStatus: "error",
-      status: 3
+      message: useMessage(),
+      showModal: false
     }
+  },
+  methods: {
+    onPositiveClick () {
+        this.message.success('Submit')
+        this.showModal = false
+      },
+      onNegativeClick () {
+        this.message.success('Cancel')
+        this.showModalRef = false
+      }
+
   }
 };
 </script>