trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 23 Releases 5 Wiki Activity

Code cleanup

Browse Source
This commit is contained in:
Jose Olarte III
2024-04-02 20:33:55 +08:00
parent 948eb2ef26
commit 2e795b71ac
1 changed files with 98 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/OnboardingDialog.vue
View File

@@ -1,23 +1,71 @@
<template>
<div>
<VOnboardingWrapper ref="wrapper" :steps="steps">
<template #default="{ previous, next, step, exit, isFirst, isLast, index }">
<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="text-lg font-medium leading-6 text-gray-900">{{ step.content.title }}</h3>
<div v-if="step.content.description" class="mt-2 max-w-xl text-sm text-gray-500">
<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>
<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>
<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>
<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>
@@ -25,58 +73,62 @@
</VOnboardingStep>
</template>
</VOnboardingWrapper>
<span id="foo">Howdy, My Friend!</span>
<button id="bar">Click me for no reason</button>
<button @click="() => goToStep(1)">Click to go second step</button>
<div>
<button @click="start">Start Onboarding</button>
<button @click="finish">Finish Onboarding</button>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding'
export default defineComponent ({
<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
VOnboardingStep,
},
})
export default class OnboardingDialog extends Vue {
setup() {
const wrapper = ref(null)
const { start, goToStep, finish } = useVOnboarding(wrapper)
const wrapper = ref(null);
const { start, goToStep, finish } = useVOnboarding(wrapper);
const steps = [
{
attachTo: { element: '#foo' },
content: { title: "Welcome!" }
attachTo: { element: "#headingRecordSomething" },
content: { title: "Welcome!" },
},
{
attachTo: { element: '#bar' },
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."
}
}
]
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
}
goToStep,
};
}
})
}
</script>
<style>
[data-v-onboarding-wrapper] [data-popper-arrow]::before {
content: '';
content: "";
background: var(--v-onboarding-step-arrow-background, white);
top: 0;
left: 0;
transition: transform 0.2s ease-out,visibility 0.2s ease-out;
transition:
transform 0.2s ease-out,
visibility 0.2s ease-out;
visibility: visible;
transform: translateX(0px) rotate(45deg);
transform-origin: center;
@@ -86,19 +138,27 @@ export default defineComponent ({
z-index: -1;
}
[data-v-onboarding-wrapper] [data-popper-placement^='top'] > [data-popper-arrow] {
[data-v-onboarding-wrapper]
[data-popper-placement^="top"]
> [data-popper-arrow] {
bottom: 5px;
}
[data-v-onboarding-wrapper] [data-popper-placement^='right'] > [data-popper-arrow] {
[data-v-onboarding-wrapper]
[data-popper-placement^="right"]
> [data-popper-arrow] {
left: -4px;
}
[data-v-onboarding-wrapper] [data-popper-placement^='bottom'] > [data-popper-arrow] {
[data-v-onboarding-wrapper]
[data-popper-placement^="bottom"]
> [data-popper-arrow] {
top: -4px;
}
[data-v-onboarding-wrapper] [data-popper-placement^='left'] > [data-popper-arrow] {
[data-v-onboarding-wrapper]
[data-popper-placement^="left"]
> [data-popper-arrow] {
right: -4px;
}
</style>
</style>