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">
<h5>Icon</h5>
<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" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<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" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<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>
@ -34,14 +34,14 @@ export default {
code: {
basic: `
<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" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" />
<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" style="background-color: #9c27b0; 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: #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: `
<template>
@ -50,20 +50,20 @@ export default {
<div class="flex-auto">
<h5>Icon</h5>
<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" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<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" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<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>
@ -80,20 +80,20 @@ export default {
<div class="flex-auto">
<h5>Icon</h5>
<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" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<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" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<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>

40
doc/avatar/LabelDoc.vue
View File

@ -7,20 +7,20 @@
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<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="U" class="mr-2" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge="4" label="U" size="xlarge" />
<Avatar v-badge.danger="4" label="U" size="xlarge" />
</div>
</div>
</div>
@ -34,14 +34,14 @@ export default {
code: {
basic: `
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; 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: #dee9fc; color: #1a2551" />
<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="U" class="mr-2" style="background-color:#9c27b0; 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: #dee9fc; color: #1a2551" shape="circle" />
<Avatar v-badge="4" label="U" size="xlarge" />
<Avatar v-badge.danger="4" label="U" size="xlarge" />
`,
options: `
<template>
@ -49,20 +49,20 @@ export default {
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<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="U" class="mr-2" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge="4" label="U" size="xlarge" />
<Avatar v-badge.danger="4" label="U" size="xlarge" />
</div>
</div>
</template>
@ -77,20 +77,20 @@ export default {
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
<Avatar label="U" class="mr-2" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<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="U" class="mr-2" style="background-color: #9c27b0; 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: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge="4" label="U" size="xlarge" />
<Avatar v-badge.danger="4" label="U" size="xlarge" />
</div>
</div>
</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>
</DocSectionText>
<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' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
@ -31,7 +31,7 @@ export default {
visible: false,
code: {
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' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
@ -52,7 +52,7 @@ export default {
options: `
<template>
<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' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
@ -84,7 +84,7 @@ export default {
composition: `
<template>
<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' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<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"
modal
:pt="{
root: 'border-none',
mask: {
style: 'backdrop-filter: blur(2px)'
}
@ -58,6 +59,7 @@ export default {
v-model:visible="visible"
modal
:pt="{
root: 'border-none',
mask: {
style: 'backdrop-filter: blur(2px)'
}
@ -94,6 +96,7 @@ export default {
v-model:visible="visible"
modal
:pt="{
root: 'border-none',
mask: {
style: 'backdrop-filter: blur(2px)'
}
@ -148,6 +151,7 @@ export default {
v-model:visible="visible"
modal
:pt="{
root: 'border-none',
mask: {
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>
</DocSectionText>
<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' }">
<p class="m-0">
@ -22,7 +22,7 @@ export default {
visible: false,
code: {
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' }">
<p class="m-0">
@ -34,7 +34,7 @@ export default {
options: `
<template>
<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' }">
<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.
@ -57,7 +57,7 @@ export default {
composition: `
<template>
<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' }">
<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.

156
doc/dialog/PositionDoc.vue
View File

@ -4,29 +4,34 @@
</DocSectionText>
<div class="card">
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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="secondary" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" 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="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div>
<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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" 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="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<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.
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.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
</div>
<DocSectionCode :code="code" />
@ -41,58 +46,68 @@ export default {
code: {
basic: `
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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="secondary" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" 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="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div>
<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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" 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="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<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.
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.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
`,
options: `
<template>
<div class="card">
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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="secondary" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" 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="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div>
<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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" 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="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<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.
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.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
</div>
</template>
@ -118,29 +133,34 @@ export default {
<template>
<div class="card">
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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="secondary" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" 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="secondary" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
</div>
<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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" 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="secondary" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<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.
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.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
</div>
</template>

8
doc/dialog/ResponsiveDoc.vue
View File

@ -7,7 +7,7 @@
</DocSectionText>
<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' }">
<p class="m-0">
@ -26,7 +26,7 @@ export default {
visible: false,
code: {
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' }">
<p class="m-0">
@ -38,7 +38,7 @@ export default {
options: `
<template>
<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' }">
<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.
@ -61,7 +61,7 @@ export default {
composition: `
<template>
<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' }">
<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.

68
doc/dialog/TemplateDoc.vue
View File

@ -3,19 +3,24 @@
<p>Header and Footer sections allow customization via templating.</p>
</DocSectionText>
<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>
<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" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<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.
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.
</p>
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template>
@ -31,19 +36,24 @@ export default {
visible: false,
code: {
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>
<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" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<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.
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.
</p>
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template>
@ -52,18 +62,23 @@ export default {
options: `
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<template #header>
<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" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<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.
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.
</p>
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template>
@ -84,18 +99,23 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<template #header>
<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" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<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.
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.
</p>
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
</template>

86
doc/dialog/WithoutModalDoc.vue
View File

@ -1,15 +1,24 @@
<template>
<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>
<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' }">
<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.
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.
</p>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
</div>
<DocSectionCode :code="code" />
@ -22,24 +31,42 @@ export default {
visible: false,
code: {
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' }">
<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.
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.
</p>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
`,
options: `
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<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.
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.
</p>
<Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
</div>
</template>
@ -57,12 +84,21 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<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.
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.
</p>
<Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
</div>
</template>