vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed focus trap demo

pull/5806/head
Cagatay Civici 2024-05-24 09:54:18 +03:00
parent d103a8ef15
commit 0242c7987c
1 changed files with 68 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
doc/focustrap/BasicDoc.vue
View File

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