docs: update docs

Author: hunterliu1003

packages/docs/components/content/BottomSheet.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
   <VBottomSheet
     @update:model-value="val => emit('update:modelValue', val)"
   >
-    <div class="flex justify-center items-center h-60 bg-primary-100">
+    <div class="flex justify-center items-center h-60 bg-primary-100 dark:bg-gray-800">
       <VButton @click="emit('update:modelValue', false)">
         Close
       </VButton>

packages/docs/components/content/DragResizeModal.vue

@@ -31,6 +31,7 @@ function dragResize(newRect) {
         :is-active="true"
         :w="200"
         :h="200"
+        class="bg-primary-100 dark:bg-gray-800"
         @resizing="dragResize"
         @dragging="dragResize"
       >

packages/docs/components/content/FullScreen.vue

@@ -8,7 +8,7 @@ const emit = defineEmits<{
 
 <template>
   <VFullScreen
-    full-screen-class="bg-primary-50"
+    full-screen-class="bg-primary-50 dark:bg-gray-800"
     @update:model-value="val => emit('update:modelValue', val)"
   >
     <h1 class="text-primary text-lg">

packages/docs/content/4.use-cases/1.playground.md

@@ -9,7 +9,7 @@ head.title: 'Playground | Examples'
     :playground
   ::
 
-  ::code-block{label="Playground.vue"}
+  ::code-block{label="Preview.vue"}
     :code-block-file{path="./Playground.vue" language="vue"}
   ::
 ::

packages/docs/content/4.use-cases/3.confirm-modal.md

@@ -5,6 +5,14 @@ head.title: 'Confirm Modal | Examples'
 # Confirm Modal
 
 ::code-group
+  ::code-block{label="ConfirmModal.vue"}
+    :code-block-file{path="./ConfirmModal.vue" language="vue"}
+  ::
+
+  ::code-block{label="Preview.vue"}
+    :code-block-file{path="./ConfirmModalPreview.vue" language="vue"}
+  ::
+
   ::code-block{label="Preview" preview}
     ::confirm-modal-preview
   ::

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

@@ -9,7 +9,15 @@ 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="FormModal.vue"}
+    :code-block-file{path="./FormModal.vue" language="vue"}
+  ::
+
+  ::code-block{label="Preview.vue"}
+    :code-block-file{path="./FormModalPreview.vue" language="vue"}
+  ::
+  
   ::code-block{label="Preview" preview}
-    ::form-modal-preview
+    :form-modal-preview
   ::
 ::

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

@@ -5,7 +5,15 @@ head.title: 'Nested Modal | Examples'
 # Nested Modal
 
 ::code-group
+  ::code-block{label="ConfirmModal.vue"}
+    :code-block-file{path="./ConfirmModal.vue" language="vue"}
+  ::
+
+  ::code-block{label="NestedModalPreview.vue"}
+    :code-block-file{path="./NestedModalPreview.vue" language="vue"}
+  ::
+
   ::code-block{label="Preview" preview}
-    ::nested-modal-preview
+    :nested-modal-preview
   ::
 ::

packages/docs/content/4.use-cases/6.full-screen-modal.md

@@ -5,8 +5,15 @@ head.title: 'Full Screen Modal | Examples'
 # Full Screen Modal
 
 ::code-group
+  ::code-block{label="FullScreen.vue"}
+    :code-block-file{path="./FullScreen.vue" language="vue"}
+  ::
+
+  ::code-block{label="FullScreenPreview.vue"}
+    :code-block-file{path="./FullScreenPreview.vue" language="vue"}
+  ::
+
   ::code-block{label="Preview" preview}
-    ::full-screen-preview
-    ::
+    :full-screen-preview
   ::
 ::

packages/docs/content/4.use-cases/7.bottom-sheet-modal.md

@@ -5,6 +5,14 @@ head.title: 'Bottom Sheet Modal | Examples'
 # Bottom Sheet Modal
 
 ::code-group
+  ::code-block{label="BottomSheet.vue"}
+    :code-block-file{path="./BottomSheet.vue" language="vue"}
+  ::
+
+  ::code-block{label="BottomSheetPreview.vue"}
+    :code-block-file{path="./BottomSheetPreview.vue" language="vue"}
+  ::
+
   ::code-block{label="Preview" preview}
     ::bottom-sheet-preview
     ::

packages/docs/content/4.use-cases/8.drag-resize-modal.md

@@ -9,6 +9,14 @@ A drag and resize modal example.
 Here is a basic drag and resize modal example that using [vue3-drag-resize](https://github.com/kirillmurashov/vue-drag-resize/tree/vue3).
 
 ::code-group
+  ::code-block{label="DragResizeModal.vue"}
+    :code-block-file{path="./DragResizeModal.vue" language="vue"}
+  ::
+
+  ::code-block{label="DragResizeModalPreview.vue"}
+    :code-block-file{path="./DragResizeModalPreview.vue" language="vue"}
+  ::
+
   ::code-block{label="Preview" preview}
     ::drag-resize-modal-preview
     ::