docs: add dialog example

Author: lepture

docs/content/components/dialog.md

@@ -1,28 +1,6 @@
-# Dialog
+---
+title: Dialog
+description: Modal dialog window displayed above the page.
+---
 
-<DialogRoot>
-  <DialogTrigger as-child>
-    <Button>Open Dailog</Button>
-  </DialogTrigger>
-  <DialogContent close-icon>
-    <DialogTitle>This is title</DialogTitle>
-    <div>Hello, this is a dialog</div>
-  </DialogContent>
-</DialogRoot>
-
------
-
-<AlertDialogRoot>
-  <AlertDialogTrigger as-child>
-    <Button>Open Dailog</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent close-icon>
-    <AlertDialogDescription>This is title</AlertDialogDescription>
-    <div>Hello, this is a dialog</div>
-    <div class="flex items-center gap-4">
-      <AlertDialogCancel as-child>
-        <Button color="gray" variant="soft">Cancel</Button>
-      </AlertDialogCancel>
-    </div>
-  </AlertDialogContent>
-</AlertDialogRoot>
+<Example name="dialog/Overview.vue" />

docs/examples/dialog/Overview.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+  Button,
+  DialogRoot,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  TextField,
+} from '#components'
+</script>
+
+<template>
+  <DialogRoot>
+    <Button :as="DialogTrigger">Edit profile</Button>
+    <DialogContent maxWidth="450px">
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>Make changes to your profile.</DialogDescription>
+      <div class="flex flex-col gap-3 mt-4">
+        <label>
+          <span class="block text-sm font-semibold mb-1">Name</span>
+          <TextField model-value="Freja Johnsen" placeholder="Enter your full name" />
+        </label>
+        <label>
+          <span class="block text-sm font-semibold mb-1">Email</span>
+          <TextField model-value="[email protected]" placeholder="Enter your email" />
+        </label>
+      </div>
+      <div class="flex mt-4 justify-end gap-3">
+        <DialogClose as-child>
+          <Button variant="soft" color="gray">
+            Cancel
+          </Button>
+        </DialogClose>
+        <DialogClose as-child>
+          <Button>Save</Button>
+        </DialogClose>
+      </div>
+    </DialogContent>
+  </DialogRoot>
+</template>