fatihsolhan / v-onboarding Goto Github PK
View Code? Open in Web Editor NEWv-onboarding is a super-slim, fully-typed onboarding component for Vue 3
Home Page: https://v-onboarding.fatihsolhan.com/
License: MIT License
v-onboarding is a super-slim, fully-typed onboarding component for Vue 3
Home Page: https://v-onboarding.fatihsolhan.com/
License: MIT License
Describe the bug
The white "gap" in the overlay that is supposed to highlight the element being described by a step is offset horizontally and vertically.
The Popper dialog is correctly positioned w.r.t. the element.
To Reproduce
Steps to reproduce the behavior:
body {
height: 100vh;
}
div#mainPanel {
height: 100%;
margin-left: 160px;
}
div.navbar {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
Expected behavior
I'd like the target element to be highlighted, it is greyed out by the overlay instead.
The white rectangle seems to be offset by the width of the sidebar, and by the height of the fixed navbar.
Trying absolute or fixed Popper strategies didn't help - in fact I don't even think that Popper is responsible for placing that rectangle?
on.beforeStep should get an argument, that indicates if previous
button was clicked.
Is your feature request related to a problem? Please describe.
I have to add steps that only exist under specific conditions.
Describe the solution you'd like
Add a way to jump directly to a step instead of the "next" one, for example using goto
Describe alternatives you've considered
Have the option to split the path in two ways (if this, go to step 3a otherwise go to step 3b)
Describe the bug
Hi! here I am again π
the after step seems not being dispatched:
on: {
afterStep: function () {
alert('testing')
},
},
To Reproduce
Steps to reproduce the behavior:
on.afterStep
const steps = [
{
attachTo: { element: '#create_quest_button' },
content: {
title: trans('Create quest'),
description: trans('If you want to create a task for others to do, click on Create quest'),
},
on: {
afterStep: function () {
alert('testing')
},
},
options: {
popper: {
modifiers: [
{
name: 'offset',
options: {
offset: [10, 20],
},
},
],
},
},
},
]
Desktop (please complete the following information):
Describe the bug
Hi, in the custom ui tutorial (https://v-onboarding-docs.fatihsolhan.com/examples/custom-ui)
the next function works fine when being not the last step
but when being the last step and click finish, there will be an error:
To Reproduce (template code)
<VOnboardingWrapper ref="wrapper" :steps="steps">
<template
#default="{
previous,
next,
step,
exit,
isFirst,
isLast,
index,
}"
>
<VOnboardingStep>
<div class="bg-white shadow sm:rounded-lg">
<div>
<div v-if="step.content">
<p>{{ step.content.title }}</p>
</div>
<div v-if="step.content.description">
<p>{{ step.content.description }}</p>
</div>
<div>
<template v-if="!isFirst">
<ElButton @click="previous">
Previous
</ElButton>
</template>
<template v-if="!isLast">
<ElButton @click="next"> Next </ElButton>
</template>
<template v-else>
<ElButton @click="next"> Finish </ElButton>
</template>
</div>
</div>
</div>
</VOnboardingStep>
</template>
</VOnboardingWrapper>
To Reproduce (typescript + vue3 composition api code)
<script setup lang="ts">
import {
VOnboardingWrapper,
VOnboardingStep,
useVOnboarding,
} from 'v-onboarding'
const wrapper = ref(null)
const { start, goToStep, finish } = useVOnboarding(wrapper)
const steps = [
{
attachTo: { element: '#foo' },
content: { title: 'Welcome!' },
},
{
attachTo: { element: '#bar' },
content: {
title: 'Do it!',
description: 'hi',
},
},
]
</script>
Desktop (please complete the following information):
OS:
macOS
Browser chrome
Version 103
Thanks!
Is your feature request related to a problem? Please describe.
Maybe I am missing something, but as fast as Im aware there is no possibility to control where the overlay per step pops up, right?
Describe the solution you'd like
It would be nice to control it in the options per step flag. Similar to the scrollToStep, where you can say for example overlay: top, right, left, bottom, center etc
This would be useful especially if you have a long table you want to explain/highlight where as of now it would scroll down all the way to the bottom.
Hi, there is an emit for "exit". But why not for "finish"?
As example: When I click the "X" button on top right of my onboarding, it executes the @EXIT=".." emit. But when the last step has been reached, there is a "Finish" button which executes as well the @EXIT=".." emit. But it should emit a @finish=".." function.
The reason for this is, I'm trying to seperate a cancel / finish function to save the state in my database. Now I have to write a complex condition to check if it's finished or has been exited manually by user. :/
Thanks!
Describe the bug
When attempting to push a new build using this library, I receive the error:
2:14:16 PM: node_modules/v-onboarding/src/types/VOnboardingWrapper.ts(1,35): error TS2307: Cannot find module '@popperjs/core/lib/createPopper' or its corresponding type declarations.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect the build to not fail.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Does @popperjs/core need to be installed as a dependency?
Describe the bug
I'm receiving the error Missing "./src/types/StepEntity" export in "v-onboarding" package
when starting local development server.
To Reproduce
Steps to reproduce the behavior:
import type { StepEntity } from 'v-onboarding/src/types/StepEntity'
to .ts fileAdditional context
I don't believe this error occurred with the previous version of this library, was the StepEntity type export changed?
Is your feature request related to a problem? Please describe.
I've been unable to figure out a way to style the highlighted element from either the docs or looking through the rendered DOM.
Describe the solution you'd like
The ability to style the highlighted element (I'm looking to add simple things such as padding and rounded corners).
Describe alternatives you've considered
I've looked through the docs as well as what is being rendered in the DOM.
Plese use v-html for view content description or title it's people needed it;
<3<3
on.beforeStep should be executed normally, the step should only be displayed after the delay.
example
const steps = [
{
attachTo: { element: '#id1' },
content: { title: 'Title 1' },
hide: true // defaults to true, hides the step when the next step has a delay
},
{
delay: 2000,
attachTo: { element: '#id2' },
content: { title: 'Title 2' },
}
On start it shows step 1, click next
, it hides the current step 1, cause step 2 has a delay.
Step 2 on.beforeStep is executed (e.g. do things like open a navigation with animation).
After 2000 miliseconds step 2 appears.
Describe the bug
This is an accessibility issue.
issue 1:
For a user who is not able to use a mouse, they navigate around the page using the tab key to focus on different elements. This doesn't work well. This also happens when clicking next or back.
issue 2:
Another note, focus should be trapped within the onboarding item once focus is established in there.
To Reproduce
issue 1:
Once start() is called, focus should be moved to inside the onboarding item, this is not the case. Currently, start() is called, but the focus is not moved, making it so this user has to hit tab many times, first focusing on every element on the page before focus is transferred to the onboarding item.
issue 2:
Say for example, if I have a close button, back button, and a next button:
Expected behavior
issue 1:
Focus should be transferred to the onboarding item when next, back, or start() is called.
issue 2:
Focus should be trapped in the onboarding item
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
pointer-events: none;
seems not to work with svg.
When an element div is found the placement of the v-onboarding dialog is on top of the element, but when I go to the next step and go back to the previous step the v-onboarding dialog is on the bottom of the element div, how do I force the placement position on one specific step? I tried the popper config in the step, but can't get this to work ..
Hi, I'm try to use this project in my app. I am using this docs to implement the feature. But when i want to save the onboarding progress to my server using on: { afterStep: () => {}}
in steps
props, the code cannot be executed, but the beforeStep
is working fine. Could you help me?
Describe the bug
Vue app is crashing due to this error.
v-onboarding.es.js:903 Uncaught TypeError: Object(...) is not a function
at Module.eval (v-onboarding.es.js:903:1)
at eval (v-onboarding.es.js:1148:30)
at ./node_modules/v-onboarding/dist/v-onboarding.es.js (chunk-vendors.js:30600:1)
at __webpack_require__ (app.js:849:30)
at fn (app.js:151:20)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js?!./src/modules/home/entityCard/views/EntityCardNegotiation.vue?vue&type=script&lang=ts:63:71)
at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js?!./src/modules/home/entityCard/views/EntityCardNegotiation.vue?vue&type=script&lang=ts (app.js:12339:1)
at __webpack_require__ (app.js:849:30)
at fn (app.js:151:20)
at eval (EntityCardNegotiation.vue:1:1)
To Reproduce
Steps to reproduce the behavior:
npm install v-onboarding
Expected behavior
App should not crash.
Desktop (please complete the following information):
The current solution of masking the current target using svg mask has some drawbacks - It doesnt account for any zoom applied to a parent element, and it also does not seem to account for border radius.
An alternative solution is to use background with opacity and then apply z-index and position:relative to the target. (Should probably do a check to see if the target already has a position-property where z-index can be applied, and also cleanup when leaving the step.)
Example of the visual bug (and POC of alternative solution):
https://stackblitz.com/edit/vitejs-vite-krz7l2?file=src%2Fcomponents%2FOnboarding.vue
I called exit emit like below.
<VOnboardingWrapper ref="wrapper" :steps="steps" :options="options" @EXIT="onExit"/>
const onExit = () => {
console.log('onexit');
};
But emit doesnt call onExit method.
The Problem:
I have a page with records in a table, this page has a button which opens a modal, the modal allows you to create a new record. I would like my users to know how to create the records.
Thoughts on a solution
Could we somehow introduce "before" and "after" hooks for each "slide", just functions that run before and after each slide is loaded on the Dom.
Slide one says "this opens the modal"
Slide 2 Before: perform "modal.open()"
(modal opens)
Slide 2 says "Enter the record name"
Slide 3 says click Submit
(I don't actually want to submit anything)
Slide 3 After: "modal.close()"
Slide 4 Results are shown in this table
Not entirely sure how this works in reverse as I write it, maybe it needs to be on the next/previous beforeNext beforePrevious?
Then when going in reverse I could say beforePrevious and perform the modal.open() again.
Additional context
I completely understand if this over complicates the library, but would be interesting to hear additional thoughts from others. π
I just think it adds a bit more flexibility for things like interactive systems.
If I get the chance, I'll have a think of a solution and send a PR, but sounds like y'all have a good grasp on the library and where to take it. π
Hi! It appears that even with preventOverlayInteraction
set to false, this package still applies blocking dom listeners that prevent clicks, focusin, etc.. The following workaround works locally, however in my production app these event listeners get wrapped by sentry and I'm unable to intercept them the same:
const originalAddEventListener = document.addEventListener;
document.addEventListener = function (type, listener, options) {
const listenerStr = listener.toString();
if (
(type === 'click' && listenerStr.includes('checkClick')) ||
(type === 'touchstart' && listenerStr.includes('checkPointerDown')) ||
(type === 'mousedown' && listenerStr.includes('checkPointerDown')) ||
(type === 'keydown' && listenerStr.includes('checkKey')) ||
(type === 'focusin' && listenerStr.includes('checkFocusIn'))
) {
return;
}
originalAddEventListener.call(this, type, listener, options);
};
Is there a reason these blocking dom listeners are still being added?
Thank you!
Describe the bug
I have some steps and want to execute a function on last step. I use example from documentation, but it doesn't work. I tried to add a log to "before" function, but have the same result.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expected that after (or before) executing a step I can add some logic (ex: go to another page).
Desktop (please complete the following information):
The bug
Setting the options
value of preventOverlayInteraction
to false
allows interaction but doesn't allow the actual click events to occur. This seems to be a bug.
To Reproduce
eg.
If you instantiate a <VOnboardingWrapper :options="options">
with the options below when the Tour popover appears, other buttons on the screen will be hoverable and clickable, but their actual click events won't fire. ie. Hyperlinks will not route you to a new page.
const options = {
overlay: {
enabled: false,
preventOverlayInteraction: true,
},
hideButtons: {
previous: false,
next: true,
exit: false,
},
}
Screenshots
It looks like the FocusTrap library is being called on to prevent event propagation:
https://github.com/fatihsolhan/v-onboarding/blob/main/src/components/VOnboardingStep.vue#L96
Expected behavior
When preventOverlayInteraction
is made false
interaction AND events become unblocked. Alternatively, if you want to keep interaction blocking separate from event blocking you could introduce a new value in options, perhaps called preventOverlayClickEvents? And if this feature already exists please let me know how to use it.
Desktop (please complete the following information):
I want to switch onboarding between pages. Actually all I need is to get an emit when the Finish button is clicked. I'm sorry if it's available in your product and I didn't notice it, but I'm writing this feature request because I can't see it in the source code.
Thank you for your time
#88 caused this bug.
After version 2.7.0, the input elements cannot be focused, probably the useFocusTrap force to focus on the step only.
It should be allowed to focus on the attached element also.
Even applied the overlay.preventOverlayInteraction = false
, still cannot focus to the attached element.
Hi, I don't know if it's my bad now or not, but I've tried changing the button titles as in the documentation using the labels object.
Here's my code snippet which should change the button title for this step:
The button title for the next button with value "Irgendwas" doesn't apply - did I do something wrong?
Another misunderstood case is the overriding of the OnboardingWrapper. Where should I pass the options to change the button titles globally? The documentation is somehow lacking here with samples. :(
Another idea: Could you let us integrate images / assets into the steps? So we could also show some illustrations with the steps. That would be great!
Thanks for your effort again - this plugin has still huge potential as other alternatives are really bad tho and this one works really cool so far. :)
Is it possible to target the attribute instead of the element?
For example: i have this html; <span data-test-id="chart-title" class="text-md md:text-xl">Manage Products</span>
I want to target the date-test-id instead of the classes which prone to break when refactoring. Thanks
Describe the bug
After finishing/closing onboarding doesn't work restarting onboarding
To Reproduce
Steps to reproduce the behavior:
Here is the link where the problem is reproduced.
Or in the library demo https://v-onboarding.fatihsolhan.com/
ty!
Hi, I really love this plugin. Could you please add props to change the buttons titles like "Next", "Previous" and "Finish"? :)
And maybe a slot to change the close icon?
That would save me the time to manually create a new popover template instead of using popper and the defaults which are pretty good and easy to re-design and customize.
I'd like to translate the buttons into german. I think this shouldn't be a big deal and can be very fast changed. Thanks! :D
Describe the bug
No problem with all the first steps on the same page (App.vue)
After a navigate to another page in the beforeStep or afterStep, the VOnboarding is here but not displayed at a valid place.
Maybe be it's a caused by popper.js.
Cause when i resize my window (force update) the div it's updated with the good positionning.
To Reproduce
Using custom template but the problem here with the basic exemple from the documentation.
Steps to reproduce the behavior:
Expected behavior
Correct focus after navigation/redirection
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
The menu is a left sidebar-navigation-menu that is "static" no change applied during navigation in app.
Vue 3 "vue": "^3.4.20",
Vue Router "vue-router": "^4.1.3",
VueOnboarding: "v-onboarding": "^2.8.2",
Is your feature request related to a problem? Please describe.
I've followed the popper docs https://popper.js.org/docs/v2/modifiers/arrow/, I'm trying with your custom UI example https://v-onboarding-docs.fatihsolhan.com/examples/custom-ui, but the arrow never appears.
That's my custom step:
const steps = [
{
attachTo: { element: '#create_quest_button' },
content: { title: 'Welcome!' },
options: {
popper: {
modifiers: [
{
name: 'arrow',
options: {
padding: 5,
},
},
{
name: 'offset',
options: {
offset: [10, 20],
},
},
],
},
},
},
]
Describe the solution you'd like
If possible, an example using arrow in the docs
Describe the bug
Error TS7016 on the import line
import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding'
Could not find a declaration file for module 'v-onboarding'.
'..../node_modules/v-onboarding/dist/v-onboarding.es.js' implicitly has an 'any' type.
There are types at '..../node_modules/v-onboarding/dist/index.d.ts',
but this result could not be resolved when respecting package.json "exports".
The 'v-onboarding' library may need to update its package.json or typings.ts(7016)
Hi! First of all, thanks for building such a great package. I'm trying to build an onboarding tutorial in my app's VueFlow editor, however given that the user can pan and zoom within the editor, certain target elements pointed to by the tour may move around the screen. There unfortunately appears to be no way of updating a step's position (or have it reattach to the target). So, it was be awesome to have an update
method exported by the useVOnboarding hook that I could repeatedly call on viewport change. If there are any existing workarounds to this, please let me know!
[vite] Internal server error: Missing "./dist/style.css" export in "v-onboarding" package
Plugin: vite:import-analysis
Describe the bug
Types are not available when using the library. Running a build errors out with:
error TS7016: Could not find a declaration file for module 'v-onboarding'. './node_modules/v-onboarding/dist/v-onboarding.es.js' implicitly has an 'any' type.
There are types at './node_modules/v-onboarding/src/typings.d.ts', but this result could not be resolved when respecting package.json "exports". The 'v-onboarding' library may need to update its package.json or typings.
1 import { VOnboardingWrapperOptions } from 'v-onboarding';
To Reproduce
Steps to reproduce the behavior:
v-onboarding
and use as normalExpected behavior
Types be exported from the library and for TS to detect them and build successfully.
Versions
TS Config
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }],
}
Hi, I'm requesting here a simple integration to provide an event which fires once I click on the close button. It would be great if there would be a option to define a prompt to ask if the user really wants to close the guide instead of directly closing it.
I'd love to integrate this to set a cookie on his browser to hide the guide once he reloads / visits our page again. As well in the backend I will save it so it will never ever show again.
So if he closes the guide accidently, it can't be recovered as it's hidden from now. So it would be great to ask for his permission to really close it or to cancel the closing.
I hope you understood my request. Even though if the prompt is a big deal - no doubts - it would be good enough to have an event which fires once I click the close button - that's all I need.
Thanks again for your effort. Let's make this plugin more great as it already is! :)
Can this be used for Vue 2?
Is your feature request related to a problem? Please describe.
I'm creating a website in french, so I need buttons in french
Describe the solution you'd like
Either translations should be embedded in the npm package, or there should be a way to pass the buttons labels in the options.
Describe alternatives you've considered
Overriding the template, which is a tedious task, just to change a button label.
yarn lock delete and yarn install
error An unexpected error occurred: "expected hoisted manifest for "v-onboarding#vue#@vue/server-renderer#@vue/compiler-ssr"".
Yarn version:
1.22.17
Node version:
16.13.2
Platform:
linux x64
Trace:
Invariant Violation: expected hoisted manifest for "v-onboarding#vue#@vue/server-renderer#@vue/compiler-ssr"
at invariant (/usr/share/yarn/lib/cli.js:2314:15)
at _loop2 (/usr/share/yarn/lib/cli.js:95100:9)
at PackageHoister.init (/usr/share/yarn/lib/cli.js:95170:19)
at PackageLinker.getFlatHoistedTree (/usr/share/yarn/lib/cli.js:48922:20)
at PackageLinker.<anonymous> (/usr/share/yarn/lib/cli.js:48933:27)
at Generator.next (<anonymous>)
at step (/usr/share/yarn/lib/cli.js:310:30)
at /usr/share/yarn/lib/cli.js:328:14
at new Promise (<anonymous>)
at new F (/usr/share/yarn/lib/cli.js:5301:28)
Describe the bug
The onboarding tour is not starting because of this warning: "toRefs() expects a reactive object but received a plain one."
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The tour should start.
Desktop (please complete the following information):
Hi,
I'm trying to get v-onboarding working, and I've come across a strange issue. When I start the onboarding, it looks fine, but when I click 'next' the next step appears correctly, but still attached to the same element as the first step. However, when I click previous, now the first step appears, but now attached to the element for the second step.
Click start (should be attached to test this, which it is):
click next (should be attached to test that, which it isn't):
click previous (should be attached to test this, which it isn't):
It seems to me that the attachment is happening before the step is updated, or something similar...
Here's the relevant HTML:
<!-- Add the Onboarding -->
<div id="onboarding">
<on-boarding></on-boarding>
<div id="testa">test this</div>
<div id="testb">test that</div>
</div>
And here's my whole OnBoarding Vue component:
<template>
<div>
<VOnboardingWrapper ref="wrapper" :steps="steps">
<template #default="{ previous, next, step,exit, isFirst, isLast, index }">
<VOnboardingStep>
<div class="bg-white shadow-lg 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><i @click="exit" class="cursor-pointer mt-icon-closewindow" />
<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-cgSecondary px-4 py-2 font-medium text-white hover:brightness-75 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-cgPrimary px-4 py-2 font-medium text-white shadow-sm hover:brightness-75 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>
<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, onMounted, ref } from 'vue'
import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding'
export default defineComponent ({
components: {
VOnboardingWrapper,
VOnboardingStep
},
setup() {
const wrapper = ref(null)
const { start, goToStep, finish } = useVOnboarding(wrapper)
const steps = [
{
attachTo: { element: '#testa' },
content: { title: "Step1!"
// description: "This is a quick tutorial to help you get started with creating your own website."
},
options: {
scrollToStep: {
enabled: false,
options: {
behavior: 'smooth',
block: 'start',
inline: 'start'
}
}
}
},
{
attachTo: { element: '#testb' },
content: { title: "Step 2",
// description: "You can choose from a variety of templates to get started with your website."
},
options: {
scrollToStep: {
enabled: false,
options: {
behavior: 'smooth',
block: 'start',
inline: 'start'
}
}
}
}
]
// onMounted(() => {
// console.log("thiss")
// finish()
// start()
// })
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: -2;
}
[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;
}
:root {
--v-onboarding-overlay-z: 40;
}
:root {
--v-onboarding-step-z: 50;
}
</style>
Hi again, it would be great if we could somehow change the closing buttons title or content. As currently there is an SVG which is fine enough - but I'd like to modify the buttons class to set some bootstrap classes like "btn-primary btn-sm" which would give it some colors and style.
Also I'd like to place myself the content instead of SVG I would love to use the char "X" as inner value. It would be much better if we could also put some HTML inside like "" to integrate font awesome icons into the close button.
This would improve the entire behaviour as I'd have to hardcode it now and that's not a proper solution. We're planning to use this within a big spread and great platform for real estate rentals and leasing in germany - so we have to stick to some professional solutions instead of hardcoding anything.
Thanks mate! Hope to hear from you soon! :)
Describe the bug
I have a large panel that displays a graph.
I would like to explain this graph to my users.
The issue occurs when I reach the step
that wraps my #page-block-graph
element.
Due to my screen size, the panel goes off the bottom of the screen and is inaccessible to read.
To Reproduce
Expected behavior
If the space between the current selection, and the bottom of the entire page is less than the height of the details step, it should appear in the other direction (appear above).
I would imagine this might also be a problem at the top, where the logic should be reversed.
Desktop (please complete the following information):
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.