Update focus trap demo
Cagatay Civici
parent
df1874fd35
commit
c514b31652
|
|
@ -2,10 +2,13 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>FocusTrap is enabled by attaching the directive with the v- prefix.</p>
|
||||
</DocSectionText>
|
||||
<div class="flex justify-content-center p-fluid">
|
||||
<div v-focustrap class="card">
|
||||
<div class="card flex justify-content-center p-fluid">
|
||||
<div v-focustrap class="w-full" style="max-width: 20rem">
|
||||
<div class="field">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
<div class="p-input-icon-right">
|
||||
<i class="pi pi-user" />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-input-icon-right">
|
||||
|
|
@ -13,29 +16,9 @@
|
|||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-float-label">
|
||||
<Password v-model="password">
|
||||
<template #header>
|
||||
<h6>Pick a password</h6>
|
||||
</template>
|
||||
<template #footer>
|
||||
<Divider />
|
||||
<p class="mt-2">Suggestions</p>
|
||||
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
|
||||
<li>At least one lowercase</li>
|
||||
<li>At least one uppercase</li>
|
||||
<li>At least one numeric</li>
|
||||
<li>Minimum 8 characters</li>
|
||||
</ul>
|
||||
</template>
|
||||
</Password>
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<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>
|
||||
<Button type="submit" label="Submit" class="mt-2" />
|
||||
</div>
|
||||
|
|
@ -49,55 +32,38 @@ export default {
|
|||
return {
|
||||
name: null,
|
||||
email: null,
|
||||
password: null,
|
||||
accept: null,
|
||||
accept: false,
|
||||
code: {
|
||||
basic: `
|
||||
<div class="flex justify-content-center p-fluid">
|
||||
<div v-focustrap class="card">
|
||||
<div class="field">
|
||||
<div v-focustrap class="w-full" style="max-width: 20rem">
|
||||
<div class="field">
|
||||
<div class="p-input-icon-right">
|
||||
<i class="pi pi-user" />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-input-icon-right">
|
||||
<i class="pi pi-envelope" />
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-float-label">
|
||||
<Password v-model="password">
|
||||
<template #header>
|
||||
<h6>Pick a password</h6>
|
||||
</template>
|
||||
<template #footer>
|
||||
<Divider />
|
||||
<p class="mt-2">Suggestions</p>
|
||||
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
|
||||
<li>At least one lowercase</li>
|
||||
<li>At least one uppercase</li>
|
||||
<li>At least one numeric</li>
|
||||
<li>Minimum 8 characters</li>
|
||||
</ul>
|
||||
</template>
|
||||
</Password>
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<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 class="field">
|
||||
<div class="p-input-icon-right">
|
||||
<i class="pi pi-envelope" />
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<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="flex justify-content-center p-fluid">
|
||||
<div v-focustrap class="card">
|
||||
<div class="card flex justify-content-center p-fluid">
|
||||
<div v-focustrap class="w-full" style="max-width: 20rem">
|
||||
<div class="field">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
<div class="p-input-icon-right">
|
||||
<i class="pi pi-user" />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-input-icon-right">
|
||||
|
|
@ -105,29 +71,9 @@ export default {
|
|||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-float-label">
|
||||
<Password v-model="password">
|
||||
<template #header>
|
||||
<h6>Pick a password</h6>
|
||||
</template>
|
||||
<template #footer>
|
||||
<Divider />
|
||||
<p class="mt-2">Suggestions</p>
|
||||
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
|
||||
<li>At least one lowercase</li>
|
||||
<li>At least one uppercase</li>
|
||||
<li>At least one numeric</li>
|
||||
<li>Minimum 8 characters</li>
|
||||
</ul>
|
||||
</template>
|
||||
</Password>
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<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>
|
||||
<Button type="submit" label="Submit" class="mt-2" />
|
||||
</div>
|
||||
|
|
@ -140,8 +86,7 @@ export default {
|
|||
return {
|
||||
name: null,
|
||||
email: null,
|
||||
password: null,
|
||||
accept: null
|
||||
accept: false
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -149,10 +94,13 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="flex justify-content-center p-fluid">
|
||||
<div v-focustrap class="card">
|
||||
<div class="card flex justify-content-center p-fluid">
|
||||
<div v-focustrap class="w-full" style="max-width: 20rem">
|
||||
<div class="field">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
<div class="p-input-icon-right">
|
||||
<i class="pi pi-user" />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-input-icon-right">
|
||||
|
|
@ -160,29 +108,9 @@ export default {
|
|||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="p-float-label">
|
||||
<Password v-model="password">
|
||||
<template #header>
|
||||
<h6>Pick a password</h6>
|
||||
</template>
|
||||
<template #footer>
|
||||
<Divider />
|
||||
<p class="mt-2">Suggestions</p>
|
||||
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
|
||||
<li>At least one lowercase</li>
|
||||
<li>At least one uppercase</li>
|
||||
<li>At least one numeric</li>
|
||||
<li>Minimum 8 characters</li>
|
||||
</ul>
|
||||
</template>
|
||||
</Password>
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<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>
|
||||
<Button type="submit" label="Submit" class="mt-2" />
|
||||
</div>
|
||||
|
|
@ -194,8 +122,7 @@ import { ref } from 'vue';
|
|||
|
||||
const name = ref();
|
||||
const email = ref();
|
||||
const password = ref();
|
||||
const accept = ref();
|
||||
const accept = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue