v-onboarding 1.0.2 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Fatih Solhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -3,21 +3,14 @@
 # v-onboarding
 
 
-**v-onboarding** is a super-slim, fully-typed onboarding component for Vue 3<br />
+**v-onboarding** is a super-slim, fully-typed onboarding component for Vue 3
 
-> **v-onboarding** is a great way to introduce your app to new users, and to help them get familiar with your app's features.
+<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>
+<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>
 
-
-[![Vue Onboarding](./playground/src/demo.gif "Vue Onboarding")](https://v-onboarding.fatihsolhan.com/)
-
-[Installation](#installation) •
-[Usage](#usage) •
-[Props](#props) •
-[Slots](#slots) •
-[Exposed Methods](#exposed-methods)
-<br />
-<br />
-  [Demo](https://v-onboarding.fatihsolhan.com/)
+  ### [Demo](https://v-onboarding.fatihsolhan.com/)
+  
+  ### [Documentation](https://v-onboarding-docs.fatihsolhan.com/)
 </div>
 
 ## Installation<a name="installation"></a>
@@ -30,245 +23,3 @@ npm install v-onboarding
 ```sh
 yarn add v-onboarding
 ```
-## Usage<a name="usage"></a>
-
-
-```vue
-<template>
-  <VOnboardingWrapper ref="wrapper" :steps="steps" />
-  <div>
-    <button id="foo">Update</button>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, onMounted } from 'vue'
-import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding'
-import 'v-onboarding/dist/style.css'
-export default defineComponent ({
-  components: {
-    VOnboardingWrapper
-  },
-  setup() {
-    const wrapper = ref(null)
-    const steps = [
-      {
-        attachTo: {
-          el: '#foo'
-        },
-        content: {
-          title: "Welcome!",
-          description: "You can use this button update your informations"
-        }
-      }
-    ]
-
-    const { start } = useVOnboarding(wrapper)
-
-    onMounted(() => {
-      start()
-    })
-
-    return {
-      wrapper,
-      steps
-    }
-  }
-})
-</script>
-
-```
-
-<br />
-
-## useVOnboarding
-#### This composition function returns the same methods explained in [Exposed Methods](#exposed-methods)
-```vue
-<template>
-  <VOnboardingWrapper ref="wrapper" />
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding'
-export default defineComponent ({
-  components: {
-    VOnboardingWrapper
-  },
-  setup() {
-    const wrapper = ref(null)
-    const { start, finish, goToStep } = useVOnboarding(wrapper)
-    return {
-      wrapper
-    }
-  }
-})
-</script>
-```
-
-<br />
-
-## Props<a name="props"></a>
-
-### steps<a name="prop-step"></a>
-
-| Name | Type     | Description                |
-| :-------- | :------- | :------------------------- |
-| `steps` | [Step[]](#prop-step) | **Required**. Onboarding steps |
-
-```js
-[
-  {
-    attachTo: {
-      element: "#foo" // or () => document.querySelector("#foo")
-      classList: ["attached", "bar"] // optional. Default: []
-    },
-    content: { // optional
-      title: "..."
-      description: "" // optional
-    },
-    on: { // optional
-      beforeStep: function() {}, // optional (could be async)
-      afterStep: function() {} // optional (could be async)
-    },
-    options: {} // [Options](#options)
-  }
-]
-```
-
-### options<a name="prop-options"></a>
-
-| Name | Type     | Description                | Default|
-| :-------- | :------- | :------------------------- | :-------- |
-| `options` | [Object](#prop-options) | **Optional**. Onboarding options | [Default Options](#prop-options-default) |
-
-```js
-{
-  popper: {} // PopperJS options: https://popper.js.org/docs/v2/constructors/#options,
-  disableOverlay: boolean,
-  scrollToStep: {
-    enabled: boolean,
-    options: {} // scrollIntoViewOptions: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-  }
-}
-```
-
-### Default Options<a name="prop-options-default"></a>
-
-```js
-{
-  popper: {
-    modifiers: [
-      {
-        name: "offset",
-        options: {
-          offset: [0, 10],
-        },
-      }
-    ]
-  },
-  disableOverlay: false,
-  scrollToStep: {
-    enabled: true,
-    options: {
-      behavior: 'smooth',
-      block: 'center',
-      inline: 'center'
-    }
-  }
-}
-```
-
-- Note that you can override these options in each step
-
-<br />
-
-## Slots<a name="slots"></a>
-
-### default<a name="slots-default"></a>
-
-```vue
-<template>
-  <VOnboardingWrapper ref="wrapper" :steps="steps">
-
-    <template #default="{ previous, next, step, exit, isFirst, isLast, index }">
-      <VOnboardingStep>
-        <div class="flex flex-col p-5">
-          <div class="flex flex-col bg-white shadow-md p-4 rounded">
-            <h3 class="font-medium text-xl">{{ step.content.title }}</h3>
-            <p v-if="step.content.description" class="text-sm">{{ step.content.description }}</p>
-            <div class="flex items-center space-x-2 mt-4">
-              <button v-if="!isFirst" @click="prev" class="flex flex-1 items-center justify-center px-2 py-1 rounded-sm text-gray-600 border-2 border-gray-600 hover:text-white hover:bg-gray-600 duration-200">Previous</button>
-              <button @click="next" class="flex flex-1 items-center justify-center px-2 py-1 rounded-sm text-indigo-600 border-2 border-indigo-600 hover:text-white hover:bg-indigo-600 duration-200">{{ isLast ? 'Finish' : 'Next' }}</button>
-            </div>
-          </div>
-        </div>
-      </VOnboardingStep>
-    <template>
-
-  </VOnboardingWrapper>
-</template>
-<script>
-import { defineComponent } from 'vue'
-import { VOnboardingWrapper, VOnboardingStep } from 'v-onboarding'
-import 'v-onboarding/dist/style.css'
-export default defineComponent({
-  components: {
-    VOnboardingWrapper,
-    VOnboardingStep
-  },
-  setup() {
-    // ...
-  }
-})
-</script>
-```
-
-<br />
-
-## Exposed Methods<a name="exposed-methods"></a>
-
-These methods can be accessed through `component ref`
-
-### Example
-```vue
-<template>
-  <VOnboardingWrapper ref="wrapper"/>
-</template>
-
-<script>
-import { defineComponent, ref, onMounted } from 'vue'
-import { VOnboardingWrapper } from 'v-onboarding'
-import 'v-onboarding/dist/style.css'
-export default defineComponent({
-  components: {
-    VOnboardingWrapper
-  },
-  setup() {
-    const wrapper = ref(null)
-    onMounted(() => {
-      if (wrapper.value) {
-        wrapper.value.start() // here
-      }
-    })
-
-    return {
-      wrapper
-    }
-  }
-})
-</script>
-```
-
-
-| Name | Usage | Description |
-| :-------- | :-------- | :-------- |
-| `start` | `start()` |Starts the onboarding |
-| `finish` | `finish()` |Finishes the onboarding |
-| `goToStep` | `goToStep(2)` or `goToStep(current => current + 1)` | Moves to the specified step number (Starts from 0) |
-
-<br />
-
-## Roadmap
-
-- Write tests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-onboarding",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "v-onboarding is a super-slim, fully-typed onboarding component for Vue 3",
   "repository": {
     "type": "git",
@@ -37,10 +37,14 @@
     "./dist/style.css": "./dist/style.css"
   },
   "scripts": {
-    "dev": "vite playground",
-    "build:playground": "vite build playground",
     "build": "yarn update-web-types && vite build",
-    "update-web-types": "vue-docgen-web-types"
+    "update-web-types": "vue-docgen-web-types",
+    "docs:dev": "cd docs && npm run dev",
+    "docs:generate": "cd docs && npm run generate",
+    "demo:dev": "vite demo",
+    "demo:build": "vite build demo",
+    "semantic-release": "semantic-release --branches main",
+    "commit": "git-cz"
   },
   "dependencies": {
     "vue": "^3.2.21"
@@ -54,13 +58,12 @@
     "@types/lodash.merge": "^4.6.6",
     "@types/node": "^16.11.7",
     "@vitejs/plugin-vue": "^1.9.4",
-    "autoprefixer": "^10.4.0",
+    "cz-conventional-changelog": "3.3.0",
     "lodash.merge": "^4.6.2",
     "minimist": "^1.2.5",
-    "postcss": "^8.4.4",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.45.0",
-    "tailwindcss": "^2.2.19",
+    "semantic-release": "^19.0.2",
     "tsup": "^5.7.0",
     "unbuild": "^0.5.11",
     "vite": "^2.6.14",
@@ -70,5 +73,10 @@
   "bugs": {
     "url": "https://github.com/fatihsolhan/v-onboarding/issues"
   },
-  "homepage": "https://github.com/fatihsolhan/v-onboarding#readme"
+  "homepage": "https://github.com/fatihsolhan/v-onboarding#readme",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
 }

package/src/types/VOnboardingWrapper.ts

@@ -10,16 +10,7 @@ export interface VOnboardingWrapperOptions {
 }
 
 export const defaultVOnboardingWrapperOptions: VOnboardingWrapperOptions = {
-  popper: {
-    modifiers: [
-      {
-        name: "offset",
-        options: {
-          offset: [0, 10],
-        },
-      }
-    ]
-  } as VOnboardingWrapperOptions["popper"],
+  popper: {},
   disableOverlay: false,
   scrollToStep: {
     enabled: true,

package/web-types/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "v-onboarding",
-  "version": "1.0.2",
+  "version": "1.0.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/dist/style.css

@@ -1 +0,0 @@
-.v-onboarding-overlay{width:100%;height:100%;position:fixed;top:0;left:0;opacity:.5;z-index:10;pointer-events:none}.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__wrapper{position:relative;z-index:20}.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-secondary{border-color:#d4d4d8;color:#3f3f46}.v-onboarding-item__actions button.v-onboarding-btn-secondary:hover{background-color:#fafafa}