Compare commits
6 Commits
meeting-pr
...
v-onboardi
| Author | SHA1 | Date | |
|---|---|---|---|
| cf8f0e3ab7 | |||
|
05601f1e15 | ||
|
|
2e795b71ac | ||
|
|
948eb2ef26 | ||
|
|
7d611725c4 | ||
|
|
def6cafc17 |
173
package-lock.json
generated
173
package-lock.json
generated
@@ -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",
|
||||
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
|
||||
"integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
|
||||
"version": "0.0.20",
|
||||
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
|
||||
"integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==",
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
|
||||
"integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.18",
|
||||
"@vueuse/metadata": "10.5.0",
|
||||
"@vueuse/shared": "10.5.0",
|
||||
"vue-demi": ">=0.14.6"
|
||||
"@types/web-bluetooth": "^0.0.20",
|
||||
"@vueuse/metadata": "10.11.1",
|
||||
"@vueuse/shared": "10.11.1",
|
||||
"vue-demi": ">=0.14.8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core/node_modules/vue-demi": {
|
||||
"version": "0.14.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
|
||||
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
|
||||
"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",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz",
|
||||
"integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==",
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
|
||||
"integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/shared": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz",
|
||||
"integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==",
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
|
||||
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
|
||||
"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",
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
164
src/components/OnboardingDialog.vue
Normal file
164
src/components/OnboardingDialog.vue
Normal file
@@ -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>
|
||||
@@ -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");
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user