Tour

<script setup>
import { ref } from "vue"

const current = ref(0)
const isVisible = ref(false)

const steps = [
  {
    target: () => document.querySelector("[data-demo-tour-target]"),
    title: "Search anything",
    description: "Find components, tokens and guidance from here.",
  },
  {
    target: () => document.querySelector("[data-demo-tour-target-2]"),
    title: "Copy the snippet",
    description: "Every demo ships with copy-ready code.",
    position: "top",
  },
]

function openTour() {
  current.value = 0
  isVisible.value = true
}
</script>

<template>
  <PStack gap="2">
    <PButton @click="openTour">Start tour</PButton>

    <PButton data-demo-tour-target>Search</PButton>
    <PButton data-demo-tour-target-2 variant="primary">Copy</PButton>

    <PTour v-model="isVisible" v-model:current="current" :steps="steps" />
  </PStack>
</template>