docs: update docs

Author: hunterliu1003

packages/docs/components/content/ConfirmModal.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
 <template>
   <VueFinalModal
     class="flex justify-center items-center"
-    content-class="flex flex-col p-4 bg-white dark:bg-black rounded-lg space-y-2"
+    content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-black border dark:border-gray-700 rounded-lg space-y-2"
     @update:model-value="val => emit('update:modelValue', val)"
   >
     <h1 class="text-xl">

packages/docs/components/content/NestedModalPreview.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ModalsContainer, useModal } from 'vue-final-modal'
+import ConfirmModal from './ConfirmModal.vue'
+
+const confirm1 = useModal({
+  component: markRaw(ConfirmModal),
+  attrs: {
+    title: 'The first confirm modal',
+    onConfirm() {
+      openConfirm2()
+    },
+  },
+  slots: {
+    default: 'Magna deserunt nulla aliquip velit aute. Et occaecat elit nulla excepteur labore cupidatat. Duis culpa mollit commodo dolor qui Lorem qui laborum elit elit Lorem occaecat. Commodo eiusmod esse voluptate officia amet quis occaecat aliqua. Proident do irure amet ut occaecat dolor laboris consectetur.',
+  },
+})
+
+const confirm2 = useModal({
+  component: markRaw(ConfirmModal),
+  attrs: {
+    title: 'The second confirm modal',
+    onConfirm() {
+      confirm2.close()
+    },
+  },
+})
+
+function openConfirm2() {
+  confirm2.open()
+}
+</script>
+
+<template>
+  <VButton @click="() => confirm1.open()">
+    Open Modal
+  </VButton>
+
+  <ModalsContainer />
+</template>

packages/docs/content/4.use-cases/1.use-cases/4.form-modal.md

@@ -4,6 +4,10 @@ head.title: 'Form Modal | Examples'
 
 # Form Modal
 
+A example that use form component in vue-final-modal.
+
+This example use [Vorms](https://vorms.mini-ghost.dev/) to handle the form validate.
+
 ::code-group
   ::code-block{label="Preview" preview}
     ::form-modal-preview

packages/docs/content/4.use-cases/1.use-cases/5.nested-modal.md

@@ -4,4 +4,8 @@ head.title: 'Nested Modal | Examples'
 
 # Nested Modal
 
-TBD
+::code-group
+  ::code-block{label="Preview" preview}
+    ::nested-modal-preview
+  ::
+::