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

Update avatar and dialog demos

pull/5136/head
Cagatay Civici 2024-01-24 01:25:44 +03:00
parent 7d14c7ef30
commit 0cb9eb29b1
9 changed files with 249 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
doc/avatar/IconDoc.vue
View File

@ -7,20 +7,20 @@
<div class="flex-auto"> <div class="flex-auto">
<h5>Icon</h5> <h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Circle</h5> <h5>Circle</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <h5>Badge</h5>
<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" /> <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
</div> </div>
</div> </div>
</div> </div>
@ -34,14 +34,14 @@ export default {
code: { code: {
basic: ` basic: `
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" /> <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
`, `,
options: ` options: `
<template> <template>
@ -50,20 +50,20 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Icon</h5> <h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Circle</h5> <h5>Circle</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <h5>Badge</h5>
<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" /> <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
</div> </div>
</div> </div>
</div> </div>
@ -80,20 +80,20 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Icon</h5> <h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Circle</h5> <h5>Circle</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <h5>Badge</h5>
<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" /> <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
</div> </div>
</div> </div>
</div> </div>

40
doc/avatar/LabelDoc.vue
View File

@ -7,20 +7,20 @@
<div class="flex-auto"> <div class="flex-auto">
<h5>Label</h5> <h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" /> <Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" /> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Circle</h5> <h5>Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" /> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <h5>Badge</h5>
<Avatar v-badge="4" label="U" size="xlarge" /> <Avatar v-badge.danger="4" label="U" size="xlarge" />
</div> </div>
</div> </div>
</div> </div>
@ -34,14 +34,14 @@ export default {
code: { code: {
basic: ` basic: `
<Avatar label="P" class="mr-2" size="xlarge" /> <Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
<Avatar v-badge="4" label="U" size="xlarge" /> <Avatar v-badge.danger="4" label="U" size="xlarge" />
`, `,
options: ` options: `
<template> <template>
@ -49,20 +49,20 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Label</h5> <h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" /> <Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" /> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Circle</h5> <h5>Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" /> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <h5>Badge</h5>
<Avatar v-badge="4" label="U" size="xlarge" /> <Avatar v-badge.danger="4" label="U" size="xlarge" />
</div> </div>
</div> </div>
</template> </template>
@ -77,20 +77,20 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Label</h5> <h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" /> <Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" /> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Circle</h5> <h5>Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" /> <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" /> <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <h5>Badge</h5>
<Avatar v-badge="4" label="U" size="xlarge" /> <Avatar v-badge.danger="4" label="U" size="xlarge" />
</div> </div>
</div> </div>
</template> </template>

8
doc/dialog/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>Dialog is used as a container and visibility is controlled with a binding to <i>visible</i> property.</p> <p>Dialog is used as a container and visibility is controlled with a binding to <i>visible</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="p-text-secondary block mb-5">Update your information.</span>
@ -31,7 +31,7 @@ export default {
visible: false, visible: false,
code: { code: {
basic: ` basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="p-text-secondary block mb-5">Update your information.</span>
@ -52,7 +52,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
@ -84,7 +84,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">

4
doc/dialog/HeadlessDoc.vue
View File

@ -9,6 +9,7 @@
v-model:visible="visible" v-model:visible="visible"
modal modal
:pt="{ :pt="{
root: 'border-none',
mask: { mask: {
style: 'backdrop-filter: blur(2px)' style: 'backdrop-filter: blur(2px)'
} }
@ -58,6 +59,7 @@ export default {
v-model:visible="visible" v-model:visible="visible"
modal modal
:pt="{ :pt="{
root: 'border-none',
mask: { mask: {
style: 'backdrop-filter: blur(2px)' style: 'backdrop-filter: blur(2px)'
} }
@ -94,6 +96,7 @@ export default {
v-model:visible="visible" v-model:visible="visible"
modal modal
:pt="{ :pt="{
root: 'border-none',
mask: { mask: {
style: 'backdrop-filter: blur(2px)' style: 'backdrop-filter: blur(2px)'
} }
@ -148,6 +151,7 @@ export default {
v-model:visible="visible" v-model:visible="visible"
modal modal
:pt="{ :pt="{
root: 'border-none',
mask: { mask: {
style: 'backdrop-filter: blur(2px)' style: 'backdrop-filter: blur(2px)'
} }

8
doc/dialog/MaximizableDoc.vue
View File

@ -3,7 +3,7 @@
<p>Adding <i>maximizable</i> property enables the full screen mode.</p> <p>Adding <i>maximizable</i> property enables the full screen mode.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
@ -22,7 +22,7 @@ export default {
visible: false, visible: false,
code: { code: {
basic: ` basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
@ -34,7 +34,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -57,7 +57,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

156
doc/dialog/PositionDoc.vue
View File

@ -4,29 +4,34 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
<template #footer> </div>
<Button label="No" icon="pi pi-times" @click="visible = false" text /> <div class="flex align-items-center gap-3 mb-5">
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <label for="email" class="font-semibold w-6rem">Email</label>
</template> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -41,58 +46,68 @@ export default {
code: { code: {
basic: ` basic: `
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
<template #footer> </div>
<Button label="No" icon="pi pi-times" @click="visible = false" text /> <div class="flex align-items-center gap-3 mb-5">
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <label for="email" class="font-semibold w-6rem">Email</label>
</template> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
<template #footer> </div>
<Button label="No" icon="pi pi-times" @click="visible = false" text /> <div class="flex align-items-center gap-3 mb-5">
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <label for="email" class="font-semibold w-6rem">Email</label>
</template> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
</div> </div>
</template> </template>
@ -118,29 +133,34 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
<template #footer> </div>
<Button label="No" icon="pi pi-times" @click="visible = false" text /> <div class="flex align-items-center gap-3 mb-5">
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <label for="email" class="font-semibold w-6rem">Email</label>
</template> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
</div> </div>
</template> </template>

8
doc/dialog/ResponsiveDoc.vue
View File

@ -7,7 +7,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
@ -26,7 +26,7 @@ export default {
visible: false, visible: false,
code: { code: {
basic: ` basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
@ -38,7 +38,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -61,7 +61,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

68
doc/dialog/TemplateDoc.vue
View File

@ -3,19 +3,24 @@
<p>Header and Footer sections allow customization via templating.</p> <p>Header and Footer sections allow customization via templating.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<template #header> <template #header>
<div class="inline-flex align-items-center justify-content-center gap-2"> <div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-2">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
@ -31,19 +36,24 @@ export default {
visible: false, visible: false,
code: { code: {
basic: ` basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<template #header> <template #header>
<div class="inline-flex align-items-center justify-content-center gap-2"> <div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-2">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
@ -52,18 +62,23 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<template #header> <template #header>
<div class="inline-flex align-items-center justify-content-center gap-2"> <div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-2">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
@ -84,18 +99,23 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<template #header> <template #header>
<div class="inline-flex align-items-center justify-content-center gap-2"> <div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-2">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>

86
doc/dialog/WithoutModalDoc.vue
View File

@ -1,15 +1,24 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Mask layer behind the Dialog can be turned off by disabling the <i>modal</i> property.</p> <p>Mask layer behind the Dialog is configured with the <i>modal</i> property. By default, no modal layer is added.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -22,24 +31,42 @@ export default {
visible: false, visible: false,
code: { code: {
basic: ` basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
</div> </div>
</template> </template>
@ -57,12 +84,21 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<p class="m-0"> <span class="p-text-secondary block mb-5">Update your information.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class="flex align-items-center gap-3 mb-3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <label for="username" class="font-semibold w-6rem">Username</label>
</p> <InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">Email</label>
<InputText id="Email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog> </Dialog>
</div> </div>
</template> </template>