App Tour/On-boarding Component

.editorconfig

@@ -1,3 +1,5 @@
+root = true
+
 [*]
 indent_style = space
 indent_size = 2
@@ -6,3 +8,5 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,47 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module',
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  parser: 'vue-eslint-parser',
+  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
+  plugins: ['prettier'],
+  rules: {
+    'comma-dangle': ['error', 'always-multiline'],
+    curly: ['error', 'multi'],
+    'no-console': 'off',
+    'no-debugger': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/singleline-html-element-content-newline': 0,
+    camelcase: 'off',
+    'no-case-declarations': 'off',
+    'no-use-before-define': 'off',
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': ['error'],
+    'vue/no-v-html': 'off',
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: {
+          max: 3,
+        },
+        multiline: {
+          max: 3,
+        },
+      },
+    ],
+    'vue/multi-word-component-names': 'off',
+    'sort-imports': [
+      'error',
+      {
+        ignoreCase: true,
+        ignoreDeclarationSort: true,
+      },
+    ],
+  },
+}

.gitignore

@@ -1,4 +1,25 @@
-.idea
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-yarn.lock
 dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.nvmrc

@@ -0,0 +1 @@
+v16

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketLinebreak": true
+}

.vscode/extensions.json

@@ -0,0 +1,19 @@
+{
+  "recommendations": [
+    "editorconfig.editorconfig",
+    "donjayamanne.githistory",
+    "eamodio.gitlens",
+    "ms-vscode.vscode-typescript-next",
+    "henrynguyen5-vsc.vsc-nvm",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "voorjaar.windicss-intellisense",
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.formatOnSave": true,
+  "prettier.semi": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+}

package.json

@@ -42,11 +42,16 @@
   "devDependencies": {
     "@iconify/vue": "^3.1.0",
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
+    "@popperjs/core": "^2.11.5",
     "@types/node": "^17.0.18",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vue/compiler-sfc": "^3.2.11",
     "@vueuse/core": "^6.9.1",
     "esbuild": "0.14.32",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.1.1",
+    "prettier": "^2.7.1",
     "simple-syntax-highlighter": "^2.2.0",
     "tsup": "^5.7.0",
     "unbuild": "^0.6.9",

packages/nuxt/src/runtime/plugin.ts

@@ -1,18 +1,21 @@
-import { useToast, useModal, TailvueModal, TailvueToast, ModalBase, PushButton } from 'tailvue'
+import { useToast, useModal, useAppTour, TailvueModal, TailvueToast, ModalBase, PushButton, AppTour } from 'tailvue'
 // @ts-ignore: resolved with nuxt
 import { defineNuxtPlugin } from '#app'
 
 export default defineNuxtPlugin((nuxtApp: any) => {
   nuxtApp.provide('toast', useToast())
   nuxtApp.provide('modal', useModal())
+  nuxtApp.provide('tour', useAppTour())
   nuxtApp.vueApp.component('PushButton', PushButton)
   nuxtApp.vueApp.component('ModalBase', ModalBase)
+  nuxtApp.vueApp.component('AppTour', AppTour)
 })
 
 // @ts-ignore: resolved with nuxt
 declare module '#app' {
   interface NuxtApp {
     $toast: TailvueToast
     $modal: TailvueModal
+    $tour: AppTour
   }
 }

playground/index.html

@@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>tailvue playground</title>
-  <script>
-    (function() {
-      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-      const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
-      if (setting === 'dark' || (prefersDark && setting !== 'light'))
-        document.documentElement.classList.toggle('dark', true)
-    })()
-  </script>
-</head>
-<body>
-<div id="app"></div>
-<script type="module" src="/src/main.ts"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>tailvue playground</title>
+    <script>
+      ;(function () {
+        const prefersDark =
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+        const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
+        if (setting === 'dark' || (prefersDark && setting !== 'light'))
+          document.documentElement.classList.toggle('dark', true)
+      })()
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>

playground/src/App.vue

@@ -1,56 +1,70 @@
 <template>
   <nav class="bg-gray-200 dark:bg-gray-700">
-    <div class="max-w-screen-xl mx-auto px-2 sm:px-6 lg:px-8">
+    <div class="max-w-screen-xl px-2 mx-auto sm:px-6 lg:px-8">
       <div class="relative flex items-center justify-between h-16 p-4">
         <div class="flex items-center">
           <Icon icon="logos-vue" class="w-8 h-8" />
           <Icon icon="mdi-plus" class="w-8 h-8" />
-          <img src="https://avatars.githubusercontent.com/u/79109951?s=200&v=4" class="w-8 h-8" alt="windicss logo">
+          <img
+            src="https://avatars.githubusercontent.com/u/79109951?s=200&v=4"
+            class="w-8 h-8"
+            alt="windicss logo"
+          />
           <div class="w-0.5 h-8 bg-gray-600 dark:bg-gray-300 mx-2" />
           <Icon icon="logos-tailwindcss-icon" class="w-8 h-8" />
         </div>
-        <button @click="toggleDark" class="text-gray-800 dark:text-white w-8 h-8 flex items-center justify-center rounded-full">
+        <button
+          @click="toggleDark()"
+          class="flex items-center justify-center w-8 h-8 text-gray-800 rounded-full dark:text-white"
+        >
           <icon icon="carbon-moon" v-if="isDark" class="w-6 h-6" />
           <icon icon="carbon-sun" v-else class="w-6 h-6" />
         </button>
       </div>
     </div>
   </nav>
   <div class="flex flex-col items-center justify-center">
-    <h1 class="py-12 text-xl"> tailvue playground </h1>
-    <div class="flex flex-col items-stretch space-y-4 px-6 md:flex-row md:space-x-4 md:space-y-0">
-      <div class="flex flex-col space-y-4 items-start">
+    <h1 class="py-12 text-xl">tailvue playground</h1>
+    <div
+      class="flex flex-col items-stretch px-6 space-y-4 md:flex-row md:space-x-4 md:space-y-0"
+    >
+      <div class="flex flex-col items-start space-y-4">
         <h2 class="text-lg">PushButton</h2>
         <buttons />
       </div>
-      <div class="flex flex-col space-y-4 items-start">
+      <div class="flex flex-col items-start space-y-4">
         <h2 class="text-lg">Modals</h2>
         <modals />
       </div>
-      <div class="flex flex-col space-y-4 items-start">
+      <div class="flex flex-col items-start space-y-4">
         <h2 class="text-lg">Toasts</h2>
         <toasts />
       </div>
+      <div class="flex flex-col items-start space-y-4">
+        <h2 class="text-lg">Tour / OnBoarding</h2>
+        <tour />
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue'
-import Buttons from './buttons.vue'
-import Modals from './modals.vue'
-import Toasts from './toasts.vue'
-import PushButton from '../../src/PushButton.vue'
 import { useDark, useToggle } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+import Buttons from './components/buttons.vue'
+import Modals from './components/modals.vue'
+import Toasts from './components/toasts.vue'
+import Tour from './components/tour.vue'
 
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 </script>
 
 <style>
-html, body {
-  @apply bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-300 min-h-screen
+html,
+body {
+  @apply bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-300 min-h-screen;
 }
 .ssh-pre {
-  @apply max-w-md whitespace-nowrap overflow-scroll
+  @apply max-w-md whitespace-nowrap overflow-scroll;
 }
 </style>

playground/src/components/buttons.vue

@@ -0,0 +1,20 @@
+<template>
+  <push-button> simple button </push-button>
+
+  <push-button state="disabled"> state="disabled" </push-button>
+  <push-button state="loading"> state="loading" </push-button>
+  <push-button size="xs"> size="xs" </push-button>
+  <push-button theme="indigo"> theme="indigo" </push-button>
+  <push-button ping> ping </push-button>
+  <push-button ping ping-color="bg-green-500">
+    ping-color="bg-green-500"
+  </push-button>
+  <div>
+    <push-button theme="white-left"> theme="white-left" </push-button>
+    <push-button theme="white-mid"> white-mid </push-button>
+    <push-button theme="white-right"> white-right </push-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import PushButton from '../../../src/components/PushButton.vue'
+</script>