chore: add gallery modal example

examples/modal-gallery/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <ModalPage />
+</template>

examples/modal-gallery/nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  extends: '../base',
+})

examples/modal-gallery/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.11.2"
+  }
+}

examples/modal-gallery/pages/gallery/[id].vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const page = ref(Number.parseInt(useParentRoute().params.id as string) || 1)
+const items = ref(Array(9))
+
+watch(page, (page) => {
+  useModalRouter().push(`/gallery/${page}`)
+})
+</script>
+
+<template>
+  <div>
+    <TheBoundary label="$__PAGES_PATH__" class="p-10 flex flex-col gap-8 justify-center items-center h-screen">
+      <div>This is the full detail page.</div>
+      <div class="flex size-64 items-center justify-center text-[88px] bg-green-400 text-black rounded-2xl">
+        {{ useParentRoute().params.id }}
+      </div>
+      <UPagination v-model="page" :page-count="1" :total="items.length" />
+      <NuxtLink to="/">
+        <UButton>Back index</UButton>
+      </NuxtLink>
+    </TheBoundary>
+  </div>
+</template>

examples/modal-gallery/pages/gallery/[id]@modal.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const page = ref(Number.parseInt(useParentRoute().params.id as string) || 1)
+const items = ref(Array(9))
+
+watch(page, (page) => {
+  useModalRouter().push(`/gallery/${page}`)
+})
+</script>
+
+<template>
+  <div>
+    <TheBoundary label="$__PAGES_PATH__" class="p-10 flex flex-col gap-8 justify-center items-center">
+      <div class="flex size-64 items-center justify-center text-[88px] bg-green-400 text-black rounded-2xl">
+        {{ useParentRoute().params.id }}
+      </div>
+      <UPagination v-model="page" :page-count="1" :total="items.length" />
+    </TheBoundary>
+  </div>
+</template>

examples/modal-gallery/pages/index.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const { isOpen, open, close } = useNuxtApp().$modalRouter
+</script>
+
+<template>
+  <TheBoundary label="$__PAGES_PATH__" class="h-screen flex items-center justify-center">
+    <div class="grid grid-cols-3 gap-6">
+      <button v-for="i in 9" :key="i" class="size-32 items-center justify-center text-4xl bg-green-400 text-black rounded-xl" @click="open(`/gallery/${i}`)">
+        {{ i }}
+      </button>
+    </div>
+
+    <Teleport v-if="isOpen" to="body">
+      <div class="fixed top-0 left-0 w-full h-full bg-black/30 flex items-center justify-center">
+        <div class="border border-gray-800 p-6 rounded-lg space-y-3 backdrop-blur dark:bg-black/75 bg-white/75">
+          <div>After you refresh this page, the contacts id page will show up in full page.</div>
+          <div>You can use browser's back / next to navigate too.</div>
+          <ParallelPage name="modal" />
+          <UButton @click="close">
+            Close
+          </UButton>
+        </div>
+      </div>
+    </Teleport>
+  </TheBoundary>
+</template>

examples/modal-gallery/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}