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

Code cleanup

v-onboarding-2024-04
Jose Olarte III 6 months ago
parent
d4ca18b1aa
commit
cd010298d4
1 changed files with 98 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 136
      src/components/OnboardingDialog.vue

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>

Write Preview
Loading…
Cancel
Save