v-onboarding 2.8.2 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +100 -11
  2. package/dist/index.d.ts +3 -3
  3. package/dist/style.css +1 -1
  4. package/dist/v-onboarding.es.js +465 -451
  5. package/dist/v-onboarding.umd.js +12 -12
  6. package/package.json +3 -2
  7. package/web-types/web-types.json +4 -2
package/README.md CHANGED
@@ -2,24 +2,113 @@
2
2
 
3
3
  # v-onboarding
4
4
 
5
+ A fully-typed, customizable onboarding component for Vue 3
5
6
 
6
- **v-onboarding** is a super-slim, fully-typed onboarding component for Vue 3
7
+ [![Version](https://img.shields.io/npm/v/v-onboarding.svg?style=flat-square)](https://www.npmjs.com/package/v-onboarding)
8
+ [![License](https://img.shields.io/npm/l/v-onboarding.svg?style=flat-square)](https://www.npmjs.com/package/v-onboarding)
9
+ [![Downloads](https://img.shields.io/npm/dm/v-onboarding.svg?style=flat-square)](https://www.npmjs.com/package/v-onboarding)
7
10
 
8
- <a href="https://www.npmjs.com/package/v-onboarding"><img src="https://img.shields.io/npm/v/v-onboarding.svg?sanitize=true&style=flat-square" alt="Version"></a>
9
- <a href="https://www.npmjs.com/package/v-onboarding"><img src="https://img.shields.io/npm/l/v-onboarding.svg?sanitize=true&style=flat-square" alt="License"></a>
11
+ [Demo](https://v-onboarding.fatihsolhan.com/) · [Documentation](https://docs.v-onboarding.fatihsolhan.com/)
10
12
 
11
- ### [Demo](https://v-onboarding.fatihsolhan.com/)
12
-
13
- ### [Documentation](https://v-onboarding-docs.fatihsolhan.com/)
14
13
  </div>
15
14
 
16
- ## Installation<a name="installation"></a>
15
+ ---
16
+
17
+ ## Features
18
+
19
+ - **TypeScript First** - Full type support out of the box
20
+ - **Customizable UI** - Use default styling or bring your own with slots
21
+ - **Accessible** - Built-in focus trap for keyboard navigation
22
+ - **Flexible Positioning** - Smart tooltip placement with Popper.js
23
+ - **SVG Overlay** - Highlight elements with customizable overlay
24
+ - **Lifecycle Hooks** - `onBeforeStep`, `onAfterStep` for custom logic
25
+
26
+ ## Installation
17
27
 
18
- #### npm
19
28
  ```sh
29
+ # npm
20
30
  npm install v-onboarding
21
- ```
22
- #### Yarn
23
- ```sh
31
+
32
+ # yarn
24
33
  yarn add v-onboarding
34
+
35
+ # pnpm
36
+ pnpm add v-onboarding
37
+ ```
38
+
39
+ ## Quick Start
40
+
41
+ ```vue
42
+ <script setup lang="ts">
43
+ import { ref } from 'vue'
44
+ import { VOnboardingWrapper, VOnboardingStep } from 'v-onboarding'
45
+ import 'v-onboarding/dist/style.css'
46
+
47
+ const wrapper = ref(null)
48
+ const steps = [
49
+ {
50
+ attachTo: { element: '#feature-1' },
51
+ content: { title: 'Welcome!', description: 'Let me show you around.' }
52
+ },
53
+ {
54
+ attachTo: { element: '#feature-2' },
55
+ content: { title: 'Next Feature', description: 'Here is another feature.' }
56
+ }
57
+ ]
58
+ </script>
59
+
60
+ <template>
61
+ <VOnboardingWrapper ref="wrapper" :steps="steps" />
62
+
63
+ <button @click="wrapper?.start()">Start Tour</button>
64
+
65
+ <div id="feature-1">Feature 1</div>
66
+ <div id="feature-2">Feature 2</div>
67
+ </template>
25
68
  ```
69
+
70
+ ## Custom Step UI
71
+
72
+ Use the default slot to create your own step UI:
73
+
74
+ ```vue
75
+ <VOnboardingWrapper ref="wrapper" :steps="steps">
76
+ <template #default="{ step, next, previous, exit, isFirst, isLast }">
77
+ <VOnboardingStep>
78
+ <div class="my-custom-tooltip">
79
+ <h3>{{ step.content.title }}</h3>
80
+ <p>{{ step.content.description }}</p>
81
+ <button v-if="!isFirst" @click="previous">Back</button>
82
+ <button @click="isLast ? exit() : next()">
83
+ {{ isLast ? 'Finish' : 'Next' }}
84
+ </button>
85
+ </div>
86
+ </VOnboardingStep>
87
+ </template>
88
+ </VOnboardingWrapper>
89
+ ```
90
+
91
+ ## Styling
92
+
93
+ Customize the overlay and tooltips with CSS variables:
94
+
95
+ ```css
96
+ :root {
97
+ --v-onboarding-overlay-z: 10;
98
+ --v-onboarding-step-z: 20;
99
+
100
+ /* SVG Overlay */
101
+ --v-onboarding-overlay-fill: rgba(0, 0, 0, 0.75);
102
+
103
+ /* Tooltip */
104
+ --v-onboarding-step-arrow-background: white;
105
+ }
106
+ ```
107
+
108
+ ## Documentation
109
+
110
+ For full documentation including all props, events, hooks, and examples, visit the [documentation site](https://docs.v-onboarding.fatihsolhan.com/).
111
+
112
+ ## License
113
+
114
+ MIT
package/dist/index.d.ts CHANGED
@@ -46,7 +46,7 @@ interface VOnboardingWrapperOptions {
46
46
  };
47
47
  hideNextStepDuringHook?: boolean;
48
48
  }
49
- declare type AttachableElement = string | (() => Element | null);
49
+ type AttachableElement = string | (() => Element | null);
50
50
  interface onGlobalOptions {
51
51
  index: number;
52
52
  step: StepEntity;
@@ -54,8 +54,8 @@ interface onGlobalOptions {
54
54
  isForward: boolean;
55
55
  isBackward: boolean;
56
56
  }
57
- declare type onBeforeStepOptions = onGlobalOptions & {};
58
- declare type onAfterStepOptions = onGlobalOptions & {};
57
+ type onBeforeStepOptions = onGlobalOptions & {};
58
+ type onAfterStepOptions = onGlobalOptions & {};
59
59
  interface StepEntity {
60
60
  content: {
61
61
  title: string;
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .v-onboarding-item{width:20rem;padding:1rem;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-radius:.375rem}.v-onboarding-item__header{display:flex;justify-content:space-between}.v-onboarding-item__header-title{font-size:1.25rem;font-weight:500;line-height:1.5}.v-onboarding-item__header-close{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%}.v-onboarding-item__header-close:hover{background:rgba(0,0,0,.1)}.v-onboarding-item__description{font-size:.875rem;color:#71717a;margin-top:.5rem}.v-onboarding-item__actions{display:flex;margin-top:1rem}.v-onboarding-item__actions>:not([hidden])~:not([hidden]){margin-left:.5rem}.v-onboarding-item__actions button{display:inline-flex;flex:1;align-items:center;justify-content:center;padding:.5rem 1.25rem;border-width:1px;border-style:solid;font-size:1rem;font-weight:500;box-shadow:0 1px 2px #0000000d;border-radius:9999px;background-color:transparent;background-image:none;cursor:pointer}.v-onboarding-item__actions button.v-onboarding-btn-primary{border-color:transparent;color:#fff;background-color:#4f46e5}.v-onboarding-item__actions button.v-onboarding-btn-primary:hover{background-color:#4338ca}.v-onboarding-item__actions button.v-onboarding-btn-primary:focus{outline-color:#312e81}.v-onboarding-item__actions button.v-onboarding-btn-secondary{border-color:#d4d4d8;color:#3f3f46}.v-onboarding-item__actions button.v-onboarding-btn-secondary:hover{background-color:#fafafa}[data-v-onboarding-wrapper] [data-popper-arrow]:before{content:"";background:var(--v-onboarding-step-arrow-background, white);top:0;left:0;transition:transform .2s ease-out,visibility .2s ease-out;visibility:visible;transform:translate(0) 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}
1
+ .v-onboarding-item{width:20rem;padding:1rem;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-radius:.375rem}.v-onboarding-item__header{display:flex;justify-content:space-between}.v-onboarding-item__header-title{font-size:1.25rem;font-weight:500;line-height:1.5}.v-onboarding-item__header-close{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%}.v-onboarding-item__header-close:hover{background:rgba(0,0,0,.1)}.v-onboarding-item__description{font-size:.875rem;color:#71717a;margin-top:.5rem}.v-onboarding-item__actions{display:flex;margin-top:1rem}.v-onboarding-item__actions>:not([hidden])~:not([hidden]){margin-left:.5rem}.v-onboarding-item__actions button{display:inline-flex;flex:1;align-items:center;justify-content:center;padding:.5rem 1.25rem;border-width:1px;border-style:solid;font-size:1rem;font-weight:500;box-shadow:0 1px 2px #0000000d;border-radius:9999px;background-color:transparent;background-image:none;cursor:pointer}.v-onboarding-item__actions button.v-onboarding-btn-primary{border-color:transparent;color:#fff;background-color:#4f46e5}.v-onboarding-item__actions button.v-onboarding-btn-primary:hover{background-color:#4338ca}.v-onboarding-item__actions button.v-onboarding-btn-primary:focus{outline-color:#312e81}.v-onboarding-item__actions button.v-onboarding-btn-secondary{border-color:#d4d4d8;color:#3f3f46}.v-onboarding-item__actions button.v-onboarding-btn-secondary:hover{background-color:#fafafa}[data-v-onboarding-wrapper] [data-popper-arrow]{z-index:-1}[data-v-onboarding-wrapper] [data-popper-arrow]:before{content:"";background:var(--v-onboarding-step-arrow-background, white);width:var(--v-onboarding-step-arrow-size, 10px);height:var(--v-onboarding-step-arrow-size, 10px);position:absolute;transform:rotate(45deg)}[data-v-onboarding-wrapper] [data-popper-placement^=top]>[data-popper-arrow]{bottom:calc(var(--v-onboarding-step-arrow-size, 10px) / 2)}[data-v-onboarding-wrapper] [data-popper-placement^=bottom]>[data-popper-arrow]{top:calc(var(--v-onboarding-step-arrow-size, 10px) / -2)}[data-v-onboarding-wrapper] [data-popper-placement^=left]>[data-popper-arrow]{right:calc(var(--v-onboarding-step-arrow-size, 10px) / -2)}[data-v-onboarding-wrapper] [data-popper-placement^=right]>[data-popper-arrow]{left:calc(var(--v-onboarding-step-arrow-size, 10px) / -2)}