From 0242c7987cb153c7cebe8d7cce1e74df46c84e13 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 24 May 2024 09:54:18 +0300
Subject: [PATCH] Fixed focus trap demo

---
 doc/focustrap/BasicDoc.vue | 140 ++++++++++++++++++-------------------
 1 file changed, 68 insertions(+), 72 deletions(-)

diff --git a/doc/focustrap/BasicDoc.vue b/doc/focustrap/BasicDoc.vue
index a9acced47..02a4fbc43 100644
--- a/doc/focustrap/BasicDoc.vue
+++ b/doc/focustrap/BasicDoc.vue
@@ -3,27 +3,26 @@
         <p>FocusTrap is enabled by attaching the directive with the v- prefix.</p>
     </DocSectionText>
     <div class="card flex justify-center p-fluid">
-        <div v-focustrap class="w-full" style="max-width: 20rem">
-            <div class="field">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-user" />
-                    </InputIcon>
-                    <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-                </IconField>
-            </div>
-            <div class="field">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-envelope" />
-                    </InputIcon>
-                    <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                </IconField>
-            </div>
-            <div class="field-checkbox">
+        <div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-user" />
+                </InputIcon>
+                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+            </IconField>
+
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-envelope" />
+                </InputIcon>
+                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+            </IconField>
+
+            <div class="flex items-center gap-2">
                 <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
                 <label for="accept">I agree to the terms and conditions.</label>
             </div>
+
             <Button type="submit" label="Submit" class="mt-2" />
         </div>
     </div>
@@ -39,54 +38,52 @@ export default {
             accept: false,
             code: {
                 basic: `
-<div v-focustrap class="w-full" style="max-width: 20rem">
-    <div class="field">
-        <IconField>
-            <InputIcon>
-                <i class="pi pi-user" />
-            </InputIcon>
-            <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-        </IconField>
-    </div>
-    <div class="field">
-        <IconField>
-            <InputIcon>
-                <i class="pi pi-envelope" />
-            </InputIcon>
-            <InputText id="email" v-model="email" type="email" placeholder="Email" />
-        </IconField>
-    </div>
-    <div class="field-checkbox">
+<div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
+    <IconField>
+        <InputIcon>
+            <i class="pi pi-user" />
+        </InputIcon>
+        <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+    </IconField>
+
+    <IconField>
+        <InputIcon>
+            <i class="pi pi-envelope" />
+        </InputIcon>
+        <InputText id="email" v-model="email" type="email" placeholder="Email" />
+    </IconField>
+
+    <div class="flex items-center gap-2">
         <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
         <label for="accept">I agree to the terms and conditions.</label>
     </div>
+
     <Button type="submit" label="Submit" class="mt-2" />
 </div>
 `,
                 options: `
 <template>
     <div class="card flex justify-center p-fluid">
-        <div v-focustrap class="w-full" style="max-width: 20rem">
-            <div class="field">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-user" />
-                    </InputIcon>
-                    <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-                </IconField>
-            </div>
-            <div class="field">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-envelope" />
-                    </InputIcon>
-                    <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                </IconField>
-            </div>
-            <div class="field-checkbox">
+        <div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-user" />
+                </InputIcon>
+                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+            </IconField>
+
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-envelope" />
+                </InputIcon>
+                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+            </IconField>
+
+            <div class="flex items-center gap-2">
                 <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
                 <label for="accept">I agree to the terms and conditions.</label>
             </div>
+
             <Button type="submit" label="Submit" class="mt-2" />
         </div>
     </div>
@@ -107,27 +104,26 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center p-fluid">
-        <div v-focustrap class="w-full" style="max-width: 20rem">
-            <div class="field">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-user" />
-                    </InputIcon>
-                    <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-                </IconField>
-            </div>
-            <div class="field">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-envelope" />
-                    </InputIcon>
-                    <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                </IconField>
-            </div>
-            <div class="field-checkbox">
+        <div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-user" />
+                </InputIcon>
+                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+            </IconField>
+
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-envelope" />
+                </InputIcon>
+                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+            </IconField>
+
+            <div class="flex items-center gap-2">
                 <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
                 <label for="accept">I agree to the terms and conditions.</label>
             </div>
+
             <Button type="submit" label="Submit" class="mt-2" />
         </div>
     </div>