Started to add onboarding dialog to home view

Where I intend to hook the onboarding dialogs to

package.json

@@ -58,6 +58,7 @@
     "three": "^0.156.1",
     "ua-parser-js": "^1.0.37",
     "util": "^0.12.5",
+    "v-onboarding": "^2.8.1",
     "vue": "^3.3.4",
     "vue-axios": "^3.5.2",
     "vue-facing-decorator": "^3.0.2",

src/components/OnboardingDialog.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <VOnboardingWrapper ref="wrapper" :steps="steps">
+      <template
+        #default="{ previous, next, step, exit, isFirst, isLast, index }"
+      >
+        <VOnboardingStep>
+          <div class="bg-white shadow sm:rounded-lg">
+            <div class="px-4 py-5 sm:p-6">
+              <div class="sm:flex sm:items-center sm:justify-between">
+                <div v-if="step.content">
+                  <h3 v-if="step.content.title" class="flex justify-between">
+                    <span
+                      class="text-lg font-medium leading-normal text-gray-900"
+                    >
+                      {{ step.content.title }}
+                    </span>
+                    <button
+                      @click="exit"
+                      class="inline-flex align-center justify-center w-6 h-6 shrink-0 rounded-full"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M6 18L18 6M6 6l12 12"
+                        ></path>
+                      </svg>
+                    </button>
+                  </h3>
+                  <div
+                    v-if="step.content.description"
+                    class="mt-2 max-w-xl text-sm text-gray-500"
+                  >
+                    <p>{{ step.content.description }}</p>
+                  </div>
+                </div>
+                <div
+                  class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative"
+                >
+                  <span
+                    class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs"
+                  >
+                    {{ `${index + 1}/${steps.length}` }}
+                  </span>
+                  <template v-if="!isFirst">
+                    <button
+                      @click="previous"
+                      type="button"
+                      class="inline-flex items-center justify-center rounded-md border border-transparent bg-yellow-100 px-4 py-2 font-medium text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm"
+                    >
+                      Previous
+                    </button>
+                  </template>
+                  <button
+                    @click="next"
+                    type="button"
+                    class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
+                  >
+                    {{ isLast ? "Finish" : "Next" }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </VOnboardingStep>
+      </template>
+    </VOnboardingWrapper>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+import { ref } from "vue";
+import {
+  VOnboardingWrapper,
+  VOnboardingStep,
+  useVOnboarding,
+} from "v-onboarding";
+
+@Component({
+  components: {
+    VOnboardingWrapper,
+    VOnboardingStep,
+  },
+})
+export default class OnboardingDialog extends Vue {
+  setup() {
+    const wrapper = ref(null);
+    const { start, goToStep, finish } = useVOnboarding(wrapper);
+    const steps = [
+      {
+        attachTo: { element: "#headingRecordSomething" },
+        content: { title: "Welcome!" },
+      },
+      {
+        attachTo: { element: "#headingLatestActivity" },
+        content: {
+          title: "Testing v-onboarding..",
+          description:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
+        },
+      },
+    ];
+
+    return {
+      wrapper,
+      steps,
+      start,
+      finish,
+      goToStep,
+    };
+  }
+}
+</script>
+<style>
+[data-v-onboarding-wrapper] [data-popper-arrow]::before {
+  content: "";
+  background: var(--v-onboarding-step-arrow-background, white);
+  top: 0;
+  left: 0;
+  transition:
+    transform 0.2s ease-out,
+    visibility 0.2s ease-out;
+  visibility: visible;
+  transform: translateX(0px) rotate(45deg);
+  transform-origin: center;
+  width: var(--v-onboarding-step-arrow-size, 10px);
+  height: var(--v-onboarding-step-arrow-size, 10px);
+  position: absolute;
+  z-index: -1;
+}
+
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="top"]
+  > [data-popper-arrow] {
+  bottom: 5px;
+}
+
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="right"]
+  > [data-popper-arrow] {
+  left: -4px;
+}
+
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="bottom"]
+  > [data-popper-arrow] {
+  top: -4px;
+}
+
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="left"]
+  > [data-popper-arrow] {
+  right: -4px;
+}
+</style>

src/main.ts

@@ -6,6 +6,7 @@ import router from "./router";
 import axios from "axios";
 import VueAxios from "vue-axios";
 import Notifications from "notiwind";
+import { useVOnboarding } from "v-onboarding";
 
 import "./assets/styles/tailwind.css";
 
@@ -142,4 +143,5 @@ createApp(App)
   .use(VueAxios, axios)
   .use(router)
   .use(Notifications)
+  .use(useVOnboarding)
   .mount("#app");

src/views/HomeView.vue

@@ -115,7 +115,9 @@
       <div v-else>
         <!-- activeDid && isRegistered -->
         <div class="mb-4">
-          <h2 class="text-xl font-bold">Record Something Given By:</h2>
+          <h2 id="headingRecordSomething" class="text-xl font-bold">
+            Record Something Given By:
+          </h2>
         </div>
 
         <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
@@ -162,6 +164,12 @@
           >
             Ideas...
           </button>
+          <button
+            @click="startOnboardingDialog()"
+            class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          >
+            (v-onboarding)
+          </button>
         </div>
       </div>
     </div>
@@ -172,10 +180,13 @@
       showGivenToUser="true"
     />
     <GiftedPrompts ref="giftedPrompts" />
+    <OnboardingDialog ref="onboardingDialog" />
 
     <!-- Results List -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-bold mb-4">Latest Activity</h2>
+      <h2 id="headingLatestActivity" class="text-xl font-bold mb-4">
+        Latest Activity
+      </h2>
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul class="border-t border-slate-300">
           <li
@@ -253,6 +264,7 @@ import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
@@ -287,6 +299,7 @@ interface GiveRecordWithContactInfo extends GiveServerRecord {
     EntityIcon,
     InfiniteScroll,
     TopMessage,
+    OnboardingDialog,
   },
 })
 export default class HomeView extends Vue {
@@ -574,5 +587,9 @@ export default class HomeView extends Vue {
   openGiftedPrompts() {
     (this.$refs.giftedPrompts as GiftedPrompts).open();
   }
+
+  startOnboardingDialog() {
+    /* Start the onboarding dialog here. */
+  }
 }
 </script>