add commentary for other attempts

Where I intend to hook the onboarding dialogs to

package-lock.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",
@@ -6643,6 +6644,15 @@
       "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@pvermeer/dexie-encrypted-addon": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@pvermeer/dexie-encrypted-addon/-/dexie-encrypted-addon-3.0.0.tgz",
@@ -9351,9 +9361,9 @@
       "dev": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.18",
+      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-      "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
     "node_modules/@types/webpack-env": {
       "version": "1.18.2",
@@ -10853,23 +10863,113 @@
       "dev": true
     },
     "node_modules/@vueuse/core": {
-      "version": "10.5.0",
+      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
-      "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.18",
+        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.5.0",
+        "@vueuse/metadata": "10.11.1",
-        "@vueuse/shared": "10.5.0",
+        "@vueuse/shared": "10.11.1",
-        "vue-demi": ">=0.14.6"
+        "vue-demi": ">=0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.6",
+      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/integrations": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-10.11.1.tgz",
+      "integrity": "sha512-Y5hCGBguN+vuVYTZmdd/IMXLOdfS60zAmDmFYc4BKBcMUPZH1n4tdyDECCPjXm0bNT3ZRUy1xzTLGaUje8Xyaw==",
+      "dependencies": {
+        "@vueuse/core": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "async-validator": "^4",
+        "axios": "^1",
+        "change-case": "^4",
+        "drauu": "^0.3",
+        "focus-trap": "^7",
+        "fuse.js": "^6",
+        "idb-keyval": "^6",
+        "jwt-decode": "^3",
+        "nprogress": "^0.2",
+        "qrcode": "^1.5",
+        "sortablejs": "^1",
+        "universal-cookie": "^6"
+      },
+      "peerDependenciesMeta": {
+        "async-validator": {
+          "optional": true
+        },
+        "axios": {
+          "optional": true
+        },
+        "change-case": {
+          "optional": true
+        },
+        "drauu": {
+          "optional": true
+        },
+        "focus-trap": {
+          "optional": true
+        },
+        "fuse.js": {
+          "optional": true
+        },
+        "idb-keyval": {
+          "optional": true
+        },
+        "jwt-decode": {
+          "optional": true
+        },
+        "nprogress": {
+          "optional": true
+        },
+        "qrcode": {
+          "optional": true
+        },
+        "sortablejs": {
+          "optional": true
+        },
+        "universal-cookie": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -10892,28 +10992,28 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.5.0",
+      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
-      "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "10.5.0",
+      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
-      "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
       "dependencies": {
-        "vue-demi": ">=0.14.6"
+        "vue-demi": ">=0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.6",
+      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -16239,6 +16339,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/focus-trap": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz",
+      "integrity": "sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==",
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -26130,6 +26238,11 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -27536,6 +27649,20 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v-onboarding": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/v-onboarding/-/v-onboarding-2.8.2.tgz",
+      "integrity": "sha512-QiUEV/AWdLIWuhK2vp7aT5CKVBGanSgRL/rySbYM3sFtk8Gd/azWnfo5whuLi+BEJhlMvRekP/Gq7TInLQwqJA==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.5",
+        "@vueuse/integrations": "^10.7.2",
+        "focus-trap": "^7",
+        "vue": "^3.2.21"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.21"
+      }
+    },
     "node_modules/valid-url": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",

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 {
@@ -350,6 +363,29 @@ export default class HomeView extends Vue {
 
       await this.updateAllFeed();
 
+      // Other things attempted:
+      //
+      // Tried these above in the field area:
+      // onboardingWrapper = ref(null);
+      // onboardSteps = [
+      //   {
+      //     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.",
+      //     },
+      //   },
+      // ];
+      //
+      // Tried these inside this method:
+      // const { start } = useVOnboarding(this.$refs.onboardingDialog);
+      // start();
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings or feed.", err);
@@ -574,5 +610,9 @@ export default class HomeView extends Vue {
   openGiftedPrompts() {
     (this.$refs.giftedPrompts as GiftedPrompts).open();
   }
+
+  startOnboardingDialog() {
+    /* Start the onboarding dialog here. */
+  }
 }
 </script>