docs: update snippets for tour and tree view

examples/nuxt-ts/components/TreeNode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { FileIcon, FolderIcon, ChevronRightIcon } from "lucide-vue-next"
-import * as tree from "@zag-js/tree-view"
+import type { Api } from "@zag-js/tree-view"
+import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-vue-next"
 
 interface Node {
   id: string
@@ -11,7 +11,7 @@ interface Node {
 interface Props {
   node: Node
   indexPath: number[]
-  api: tree.Api
+  api: Api
 }
 
 const props = defineProps<Props>()

examples/nuxt-ts/pages/tour.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted, useId } from "vue"
-import * as tour from "@zag-js/tour"
 import { tourControls, tourData } from "@zag-js/shared"
-import { useMachine, normalizeProps } from "@zag-js/vue"
+import * as tour from "@zag-js/tour"
+import { normalizeProps, useMachine } from "@zag-js/vue"
 import { X } from "lucide-vue-next"
+import { useId } from "vue"
 
 const controls = useControls(tourControls)
 
@@ -43,21 +43,21 @@ const open = computed(() => api.value.open && api.value.step)
     </div>
 
     <Teleport to="body" v-if="open">
-      <div v-if="api.step.backdrop" v-bind="api.getBackdropProps()" />
+      <div v-if="api.step?.backdrop" v-bind="api.getBackdropProps()" />
       <div v-bind="api.getSpotlightProps()" />
       <div v-bind="api.getPositionerProps()">
         <div v-bind="api.getContentProps()">
-          <div v-if="api.step.arrow" v-bind="api.getArrowProps()">
+          <div v-if="api.step?.arrow" v-bind="api.getArrowProps()">
             <div v-bind="api.getArrowTipProps()" />
           </div>
 
-          <p v-bind="api.getTitleProps()">{{ api.step.title }}</p>
-          <div v-bind="api.getDescriptionProps()">{{ api.step.description }}</div>
+          <p v-bind="api.getTitleProps()">{{ api.step?.title }}</p>
+          <div v-bind="api.getDescriptionProps()">{{ api.step?.description }}</div>
           <div v-bind="api.getProgressTextProps()">{{ api.getProgressText() }}</div>
 
-          <div v-if="api.step.actions" class="tour button__group">
+          <div v-if="api.step?.actions" class="tour button__group">
             <button
-              v-for="action in api.step.actions"
+              v-for="action in api.step?.actions"
               :key="action.label"
               v-bind="api.getActionTriggerProps({ action })"
             >

website/data/snippets/vue/tour/usage.mdx

@@ -2,7 +2,34 @@
 <script setup lang="ts">
   import * as tour from "@zag-js/tour"
   import { useMachine, normalizeProps } from "@zag-js/vue"
-  import { ref, onMounted, useId, computed, Teleport } from "vue"
+  import { useId, computed, Teleport } from "vue"
+
+  const steps: tour.StepDetails[] = [
+    {
+      type: 'dialog',
+      id: 'start',
+      title: 'Ready to go for a ride',
+      description: "Let's take the tour component for a ride and have some fun!",
+      actions: [{ label: "Let's go!", action: 'next' }],
+    },
+    {
+      type: 'dialog',
+      id: 'logic',
+      title: 'Statechart',
+      description: `As an engineer, you'll learn about the internal statechart that powers the tour.`,
+      actions: [
+        { label: 'Prev', action: 'prev' },
+        { label: 'Next', action: 'next' },
+      ],
+    },
+    {
+      type: 'dialog',
+      id: 'end',
+      title: 'Amazing! You got to the end',
+      description: 'Like what you see? Now go ahead and use it in your project.',
+      actions: [{ label: 'Finish', action: 'dismiss' }],
+    },
+  ]
 
   const [state, send] = useMachine(tour.machine({ id: useId(), steps }))
 
@@ -17,23 +44,23 @@
   </div>
 
   <Teleport to="body" v-if="open">
-    <div v-if="api.step.backdrop" v-bind="api.getBackdropProps()" />
+    <div v-if="api.step?.backdrop" v-bind="api.getBackdropProps()" />
     <div v-bind="api.getSpotlightProps()" />
     <div v-bind="api.getPositionerProps()">
       <div v-bind="api.getContentProps()">
-        <div v-if="api.step.arrow" v-bind="api.getArrowProps()">
+        <div v-if="api.step?.arrow" v-bind="api.getArrowProps()">
           <div v-bind="api.getArrowTipProps()" />
         </div>
 
-        <p v-bind="api.getTitleProps()">{{ api.step.title }}</p>
-        <div v-bind="api.getDescriptionProps()">{{ api.step.description }}</div>
+        <p v-bind="api.getTitleProps()">{{ api.step?.title }}</p>
+        <div v-bind="api.getDescriptionProps()">{{ api.step?.description }}</div>
         <div v-bind="api.getProgressTextProps()">
           {{ api.getProgressText() }}
         </div>
 
-        <div v-if="api.step.actions" class="tour button__group">
+        <div v-if="api.step?.actions" class="tour button__group">
           <button
-            v-for="action in api.step.actions"
+            v-for="action in api.step?.actions"
             :key="action.label"
             v-bind="api.getActionTriggerProps({ action })"
           >

website/data/snippets/vue/tree-view/usage.mdx

@@ -2,7 +2,7 @@
 <!-- TreeNode.vue -->
 <script setup lang="ts">
   import { FileIcon, FolderIcon, ChevronRightIcon } from "lucide-vue-next"
-  import * as tree from "@zag-js/tree-view"
+  import type { Api } from "@zag-js/tree-view"
 
   interface Node {
     id: string
@@ -13,7 +13,7 @@
   interface Props {
     node: Node
     indexPath: number[]
-    api: tree.Api
+    api: Api
   }
 
   const props = defineProps<Props>()
@@ -57,10 +57,9 @@
 ```html
 <!-- TreeView.vue -->
 <script setup lang="ts">
-  import { treeviewControls } from "@zag-js/shared"
   import * as tree from "@zag-js/tree-view"
   import { normalizeProps, useMachine } from "@zag-js/vue"
-  import { useId } from "vue"
+  import { computed, useId } from "vue"
 
   // 1. Create the tree collection
 
@@ -94,12 +93,5 @@
       </div>
     </div>
   </main>
-
-  <Toolbar>
-    <StateVisualizer :state="state" :omit="['collection']" />
-    <template #controls>
-      <Controls :control="controls" />
-    </template>
-  </Toolbar>
 </template>
 ```