From e6b10b128bafb72976e73fd265af42f1e2d2774c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Korczak?= <michal.k2001@gmail.com>
Date: Sat, 4 Nov 2023 02:34:03 +0100
Subject: [PATCH] chore: add more examples

---
 examples/nuxt-ts/pages/collapsible.vue        | 42 +++++++++++++++++++
 examples/solid-ts/src/pages/collapsible.tsx   | 19 +++++++--
 examples/vue-ts/src/pages/collapsible.tsx     | 23 ++++++++--
 .../snippets/vue-sfc/collapsible/usage.mdx    |  5 +--
 4 files changed, 80 insertions(+), 9 deletions(-)
 create mode 100644 examples/nuxt-ts/pages/collapsible.vue

diff --git a/examples/nuxt-ts/pages/collapsible.vue b/examples/nuxt-ts/pages/collapsible.vue
new file mode 100644
index 0000000000..5241bb278c
--- /dev/null
+++ b/examples/nuxt-ts/pages/collapsible.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import * as collapsible from "@zag-js/collapsible"
+import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+
+const controls = useControls(collapsibleControls)
+
+const [state, send] = useMachine(collapsible.machine({ id: "1" }), {
+  context: controls.context,
+})
+
+const api = computed(() => collapsible.connect(state.value, send, normalizeProps))
+</script>
+
+<template>
+  <main class="collapsible">
+    <div v-bind="api.rootProps">
+      <div>
+        <span>{{ collapsibleData.headline }}</span>
+        <button v-if="api.isOpen" v-bind="api.triggerProps">Collapse</button>
+        <button v-if="!api.isOpen" v-bind="api.triggerProps">Expand</button>
+      </div>
+
+      <div>
+        <span>{{ collapsibleData.visibleItem }}</span>
+      </div>
+
+      <div v-bind="api.contentProps">
+        <div v-for="item in data" :key="item.id">
+          <div>{{ item }}</div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <Toolbar>
+    <StateVisualizer :state="state" />
+    <template #controls>
+      <Controls :config="controls.config" :state="controls.context" />
+    </template>
+  </Toolbar>
+</template>
diff --git a/examples/solid-ts/src/pages/collapsible.tsx b/examples/solid-ts/src/pages/collapsible.tsx
index 315cd4798a..41f2abfe59 100644
--- a/examples/solid-ts/src/pages/collapsible.tsx
+++ b/examples/solid-ts/src/pages/collapsible.tsx
@@ -1,7 +1,7 @@
 import * as collapsible from "@zag-js/collapsible"
-import { normalizeProps, useMachine, mergeProps } from "@zag-js/solid"
-import { createMemo, createUniqueId } from "solid-js"
 import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { Index, createMemo, createUniqueId } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -18,7 +18,20 @@ export default function Page() {
   return (
     <>
       <main class="collapsible">
-        <div {...api().rootProps}></div>
+        <div {...api().rootProps}>
+          <div>
+            <span>{collapsibleData.headline}</span>
+            <button {...api().triggerProps}>{api().isOpen ? "Collapse" : "Expand"}</button>
+          </div>
+
+          <div>
+            <span>{collapsibleData.visibleItem}</span>
+          </div>
+
+          <div {...api().contentProps}>
+            <Index each={collapsibleData.items}>{(item) => <div>{item()}</div>}</Index>
+          </div>
+        </div>
       </main>
 
       <Toolbar controls={controls.ui}>
diff --git a/examples/vue-ts/src/pages/collapsible.tsx b/examples/vue-ts/src/pages/collapsible.tsx
index 69481c572c..9a61a6d749 100644
--- a/examples/vue-ts/src/pages/collapsible.tsx
+++ b/examples/vue-ts/src/pages/collapsible.tsx
@@ -1,7 +1,7 @@
 import * as collapsible from "@zag-js/collapsible"
-import { normalizeProps, useMachine, mergeProps } from "@zag-js/vue"
-import { computed, defineComponent, h, Fragment } from "vue"
 import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { computed, defineComponent } from "vue"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -23,7 +23,24 @@ export default defineComponent({
       return (
         <>
           <main class="collapsible">
-            <div {...api.rootProps}></div>
+            <div {...api.rootProps}>
+              <div>
+                <span>{collapsibleData.headline}</span>
+                <button {...api.triggerProps}>{api.isOpen ? "Collapse" : "Expand"}</button>
+              </div>
+
+              <div>
+                <span>{collapsibleData.visibleItem}</span>
+              </div>
+
+              <div {...api.contentProps}>
+                {collapsibleData.items.map((item) => (
+                  <div key={item}>
+                    <span>{item}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
           </main>
 
           <Toolbar controls={controls.ui}>
diff --git a/website/data/snippets/vue-sfc/collapsible/usage.mdx b/website/data/snippets/vue-sfc/collapsible/usage.mdx
index d15036cb63..5da71d0542 100644
--- a/website/data/snippets/vue-sfc/collapsible/usage.mdx
+++ b/website/data/snippets/vue-sfc/collapsible/usage.mdx
@@ -13,9 +13,8 @@ const api = computed(() => collapsible.connect(state.value, send, normalizeProps
 
 <template>
   <div ref="ref" v-bind="api.rootProps">
-    <button v-bind="api.triggerProps">
-      {{ state.value === "open" ? "Collapse" : "Expand" }}
-    </button>
+    <button v-if="api.isOpen" v-bind="api.triggerProps">Collapse</button>
+    <button v-if="!api.isOpen" v-bind="api.triggerProps">Expand</button>
     <div v-bind="api.contentProps">
       <div
         v-for="item in data"