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

csb updated for overlay and file components

pull/1055/head
Tuğçe Küçükoğlu 2021-03-18 16:26:28 +03:00
parent 2617639ccb
commit ec0aed103f
9 changed files with 1829 additions and 2016 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/confirmdialog/ConfirmDialogDemo.vue
View File

@ -54,7 +54,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
@ -68,7 +68,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
@ -83,7 +83,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}

536
src/views/confirmdialog/ConfirmDialogDoc.vue
View File

@ -1,10 +1,8 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>ConfirmationService</h5>
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
instance is created.</p>
<AppDoc name="ConfirmDialogDemo" :sources="sources">
<h5>ConfirmationService</h5>
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
instance is created.</p>
<pre v-code.script><code>
import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';
@ -14,15 +12,15 @@ app.use(ConfirmationService);
</code></pre>
<h5>Import</h5>
<h5>Import</h5>
<pre v-code.script><code>
import ConfirmDialog from 'primevue/confirmdialog';
</code></pre>
<h5>Getting Started</h5>
<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component
where it can be shared by any component within the application.</p>
<h5>Getting Started</h5>
<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component
where it can be shared by any component within the application.</p>
<pre v-code><code>
&lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
@ -50,8 +48,8 @@ export default {
</code></pre>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code>
import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm";
@ -75,8 +73,8 @@ export default defineComponent({
</code></pre>
<h5>Close Confirmation</h5>
<p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
<h5>Close Confirmation</h5>
<p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code>
export default {
methods: {
@ -88,287 +86,196 @@ export default {
</code></pre>
<h5>Responsive</h5>
<p>ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes
100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
<h5>Responsive</h5>
<p>ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes
100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
<pre v-code><code>
&lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt;
</code></pre>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Header text of the dialog.</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
<tr>
<td>blockScroll</td>
<td>boolean</td>
<td>true</td>
<td>Whether background scroll should be blocked when dialog is visible.</td>
</tr>
</tbody>
</table>
</div>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Header text of the dialog.</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
<tr>
<td>blockScroll</td>
<td>boolean</td>
<td>true</td>
<td>Whether background scroll should be blocked when dialog is visible.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-dialog</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-dialog</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ConfirmDialogDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
&lt;ConfirmDialog group="positionDialog"&gt;&lt;/ConfirmDialog&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"&gt;&lt;/Button&gt;
&lt;Button @click="confirm2()" icon="pi pi-times" label="Delete"&gt;&lt;/Button&gt;
&lt;h5&gt;Position&lt;/h5&gt;
&lt;div class="p-grid p-dir-col"&gt;
&lt;div class="p-col"&gt;
&lt;Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"&gt;&lt;/Button&gt;
&lt;Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"&gt;&lt;/Button&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"&gt;&lt;/Button&gt;
&lt;Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"&gt;&lt;/Button&gt;
&lt;Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"&gt;&lt;/Button&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"&gt;&lt;/Button&gt;
&lt;Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"&gt;&lt;/Button&gt;
&lt;Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"&gt;&lt;/Button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
methods: {
confirm1() {
this.$confirm.require({
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
confirm2() {
this.$confirm.require({
message: 'Do you want to delete this record?',
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger',
accept: () => {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
confirmPosition(position) {
this.$confirm.require({
key: 'positionDialog',
message: 'Do you want to delete this record?',
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
position: position,
accept: () => {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<Toast />
<div class="content-section implementation">
<ConfirmDialog></ConfirmDialog>
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<ConfirmDialog></ConfirmDialog>
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card">
<h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<div class="card">
<h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<h5>Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
</div>
<h5>Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
</div>
</div>
</div>
@ -387,7 +294,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
@ -401,7 +308,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
@ -416,42 +323,44 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
}
}`
}
<\\/script>
`
},
'api': {
content: `<template>
<div class="layout-content">
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<Toast />
<div class="content-section implementation">
<ConfirmDialog></ConfirmDialog>
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<ConfirmDialog></ConfirmDialog>
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card">
<h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<div class="card">
<h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<h5>Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
</div>
<h5>Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
</div>
</div>
</div>
@ -477,7 +386,7 @@ export default defineComponent({
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
@ -492,7 +401,7 @@ export default defineComponent({
toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
@ -508,20 +417,19 @@ export default defineComponent({
toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
return { confirm1, confirm2, confirmPosition };
}
});`
});
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

4
src/views/confirmpopup/ConfirmPopupDemo.vue
View File

@ -34,7 +34,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
@ -48,7 +48,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}

425
src/views/confirmpopup/ConfirmPopupDoc.vue
View File

@ -1,10 +1,8 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>ConfirmationService</h5>
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
instance is created.</p>
<AppDoc name="ConfirmPopupDemo" :sources="sources">
<h5>ConfirmationService</h5>
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
instance is created.</p>
<pre v-code.script><code>
import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';
@ -14,15 +12,15 @@ app.use(ConfirmationService);
</code></pre>
<h5>Import</h5>
<h5>Import</h5>
<pre v-code.script><code>
import ConfirmPopup from 'primevue/confirmpopup';
</code></pre>
<h5>Getting Started</h5>
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup.
<i>target</i> attribute is mandatory to align the popup to its caller.</p>
<h5>Getting Started</h5>
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup.
<i>target</i> attribute is mandatory to align the popup to its caller.</p>
<pre v-code><code>
&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
@ -50,8 +48,8 @@ export default {
</code></pre>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code>
import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm";
@ -79,8 +77,8 @@ export default defineComponent({
</code></pre>
<h5>Close Confirmation</h5>
<p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
<h5>Close Confirmation</h5>
<p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code>
export default {
methods: {
@ -92,230 +90,174 @@ export default {
</code></pre>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>DomElement</td>
<td>null</td>
<td>Element to align the overlay.</td>
</tr>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
</tbody>
</table>
</div>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>DomElement</td>
<td>null</td>
<td>Element to align the overlay.</td>
</tr>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-popup</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-confirm-content</td>
<td>Content element.</td>
</tr>
<tr>
<td>p-confirm-popup-icon</td>
<td>Message icon.</td>
</tr>
<tr>
<td>p-confirm-popup-message</td>
<td>Message text.</td>
</tr>
<tr>
<td>p-confirm-popup-footer</td>
<td>Footer element for buttons.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-popup</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-confirm-content</td>
<td>Content element.</td>
</tr>
<tr>
<td>p-confirm-popup-icon</td>
<td>Message icon.</td>
</tr>
<tr>
<td>p-confirm-popup-message</td>
<td>Message text.</td>
</tr>
<tr>
<td>p-confirm-popup-footer</td>
<td>Footer element for buttons.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ConfirmPopupDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
&lt;div class="card"&gt;
&lt;Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"&gt;&lt;/Button&gt;
&lt;Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"&gt;&lt;/Button&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
methods: {
confirm1(event) {
this.$confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
confirm2(event) {
this.$confirm.require({
target: event.currentTarget,
message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger',
accept: () => {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<ConfirmPopup></ConfirmPopup>
<Toast />
<div class="content-section implementation">
<ConfirmPopup></ConfirmPopup>
<div class="card">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
</div>
<div class="card">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
</div>
</div>
</template>
@ -332,7 +274,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
},
@ -346,24 +288,25 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
}
}`
}
<\\/script>
`
},
'api': {
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="layout-content">
<div>
<ConfirmPopup></ConfirmPopup>
<Toast />
<div class="content-section implementation">
<ConfirmPopup></ConfirmPopup>
<div class="card">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
</div>
<div class="card">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
</div>
</div>
</template>
@ -387,7 +330,7 @@ export default defineComponent({
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
@ -402,7 +345,7 @@ export default defineComponent({
toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
},
reject: () => {
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
@ -410,13 +353,11 @@ export default defineComponent({
return { confirm1, confirm2 };
},
})
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

1068
src/views/dialog/DialogDoc.vue
View File

File diff suppressed because it is too large Load Diff

655
src/views/fileupload/FileUploadDoc.vue
View File

@ -1,73 +1,71 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="FileUploadDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import FileUpload from 'primevue/fileupload';
</code></pre>
<h5>Getting Started</h5>
<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
<h5>Getting Started</h5>
<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
<pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" /&gt;
</code></pre>
<h5>Multiple Uploads</h5>
<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
<h5>Multiple Uploads</h5>
<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
<pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
</code></pre>
<h5>Basic UI</h5>
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<h5>Basic UI</h5>
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
</code></pre>
<h5>DragDrop</h5>
<p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
<h5>DragDrop</h5>
<p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
<h5>Auto Uploads</h5>
<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
<h5>Auto Uploads</h5>
<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
<pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
</code></pre>
<h5>File Types</h5>
<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
<h5>File Types</h5>
<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
<pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
</code></pre>
<h5>File Size and File Linit</h5>
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
<h5>File Size and File Linit</h5>
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
<pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
</code></pre>
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
<ul>
<li>
invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'
</li>
<li>
invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'
</li>
</ul>
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
<ul>
<li>
invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'
</li>
<li>
invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'
</li>
</ul>
<h5>Request Customization</h5>
<p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
<h5>Request Customization</h5>
<p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
<h5>Custom Upload</h5>
<p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
<h5>Custom Upload</h5>
<p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
<pre v-code><code>
&lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
@ -80,8 +78,8 @@ myUploader(event) {
</code></pre>
<h5>Empty Template</h5>
<p>When there is no file selected, you may use the empty slot to display content.</p>
<h5>Empty Template</h5>
<p>When there is no file selected, you may use the empty slot to display content.</p>
<pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" /&gt;
&lt;template #empty&gt;
@ -91,312 +89,273 @@ myUploader(event) {
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>string</td>
<td>null</td>
<td>Name of the request parameter to identify the files at backend.</td>
</tr>
<tr>
<td>url</td>
<td>string</td>
<td>null</td>
<td>Remote url to upload the files.</td>
</tr>
<tr>
<td>mode</td>
<td>string</td>
<td>advanced</td>
<td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>Used to select multiple files at once from file dialog.</td>
</tr>
<tr>
<td>accept</td>
<td>string</td>
<td>false</td>
<td>Pattern to restrict the allowed file types such as "image/*".</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>Disables the upload functionality.</td>
</tr>
<tr>
<td>auto</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, upload begins automatically after selection is completed.</td>
</tr>
<tr>
<td>maxFileSize</td>
<td>number</td>
<td>null</td>
<td>Maximum file size allowed in bytes.</td>
</tr>
<tr>
<td>invalidFileSizeMessage</td>
<td>string</td>
<td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
<td>Message of the invalid fize size.</td>
</tr>
<tr>
<td>invalidFileLimitMessage</td>
<td>string</td>
<td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
<td>Message to display when number of files to be uploaded exceeeds the limit.</td>
</tr>
<tr>
<td>fileLimit</td>
<td>number</td>
<td>null</td>
<td>Maximum number of files that can be uploaded.</td>
</tr>
<tr>
<td>withCredentials</td>
<td>boolean</td>
<td>false</td>
<td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
</tr>
<tr>
<td>previewWidth</td>
<td>number</td>
<td>50</td>
<td>Width of the image thumbnail in pixels.</td>
</tr>
<tr>
<td>chooseLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>uploadLabel</td>
<td>string</td>
<td>Upload</td>
<td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>cancelLabel</td>
<td>string</td>
<td>Cancel</td>
<td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>customUpload</td>
<td>boolean</td>
<td>false</td>
<td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>showUploadButton</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the upload button.</td>
</tr>
<tr>
<td>showCancelButton</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the cancel button.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>string</td>
<td>null</td>
<td>Name of the request parameter to identify the files at backend.</td>
</tr>
<tr>
<td>url</td>
<td>string</td>
<td>null</td>
<td>Remote url to upload the files.</td>
</tr>
<tr>
<td>mode</td>
<td>string</td>
<td>advanced</td>
<td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>Used to select multiple files at once from file dialog.</td>
</tr>
<tr>
<td>accept</td>
<td>string</td>
<td>false</td>
<td>Pattern to restrict the allowed file types such as "image/*".</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>Disables the upload functionality.</td>
</tr>
<tr>
<td>auto</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, upload begins automatically after selection is completed.</td>
</tr>
<tr>
<td>maxFileSize</td>
<td>number</td>
<td>null</td>
<td>Maximum file size allowed in bytes.</td>
</tr>
<tr>
<td>invalidFileSizeMessage</td>
<td>string</td>
<td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
<td>Message of the invalid fize size.</td>
</tr>
<tr>
<td>invalidFileLimitMessage</td>
<td>string</td>
<td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
<td>Message to display when number of files to be uploaded exceeeds the limit.</td>
</tr>
<tr>
<td>fileLimit</td>
<td>number</td>
<td>null</td>
<td>Maximum number of files that can be uploaded.</td>
</tr>
<tr>
<td>withCredentials</td>
<td>boolean</td>
<td>false</td>
<td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
</tr>
<tr>
<td>previewWidth</td>
<td>number</td>
<td>50</td>
<td>Width of the image thumbnail in pixels.</td>
</tr>
<tr>
<td>chooseLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>uploadLabel</td>
<td>string</td>
<td>Upload</td>
<td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>cancelLabel</td>
<td>string</td>
<td>Cancel</td>
<td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>customUpload</td>
<td>boolean</td>
<td>false</td>
<td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>showUploadButton</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the upload button.</td>
</tr>
<tr>
<td>showCancelButton</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the cancel button.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div classe="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>before-upload</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file upload begins to customize the request
such as post parameters before the files.</td>
</tr>
<tr>
<td>before-send</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file send begins to customize the request
such as adding headers.</td>
</tr>
<tr>
<td>upload</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Uploaded files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>error</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Files that are not uploaded.</td>
<td>Callback to invoke if file upload fails.</td>
</tr>
<tr>
<td>clear</td>
<td>-.</td>
<td>Callback to invoke when files in queue are removed without uploading.</td>
</tr>
<tr>
<td>select</td>
<td>event.originalEvent: Original browser event. <br />
event.files: List of selected files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>progress</td>
<td>event.originalEvent: Original browser event. <br />
event.progress: Calculated progress value.</td>
<td>Callback to invoke when files are selected.</td>
</tr>
<tr>
<td>uploader</td>
<td>event.files: List of selected files.</td>
<td>Callback to invoke to implement a custom upload.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div classe="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>before-upload</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file upload begins to customize the request
such as post parameters before the files.</td>
</tr>
<tr>
<td>before-send</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file send begins to customize the request
such as adding headers.</td>
</tr>
<tr>
<td>upload</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Uploaded files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>error</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Files that are not uploaded.</td>
<td>Callback to invoke if file upload fails.</td>
</tr>
<tr>
<td>clear</td>
<td>-.</td>
<td>Callback to invoke when files in queue are removed without uploading.</td>
</tr>
<tr>
<td>select</td>
<td>event.originalEvent: Original browser event. <br />
event.files: List of selected files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>progress</td>
<td>event.originalEvent: Original browser event. <br />
event.progress: Calculated progress value.</td>
<td>Callback to invoke when files are selected.</td>
</tr>
<tr>
<td>uploader</td>
<td>event.files: List of selected files.</td>
<td>Callback to invoke to implement a custom upload.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>empty</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>empty</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-fileupload</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-fileupload-buttonbar</td>
<td>Header containing the buttons.</td>
</tr>
<tr>
<td>p-fileupload-content</td>
<td>Content section.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-fileupload</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-fileupload-buttonbar</td>
<td>Header containing the buttons.</td>
</tr>
<tr>
<td>p-fileupload-content</td>
<td>Content section.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fileupload" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="FileUploadDemo" :sources="sources" :toastService="true" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Advanced&lt;/h3&gt;
&lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"&gt;
&lt;template #empty&gt;
&lt;p&gt;Drag and drop files to here to upload.&lt;/p&gt;
&lt;/template&gt;
&lt;/FileUpload&gt;
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" /&gt;
&lt;h3&gt;Basic with Auto&lt;/h3&gt;
&lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
methods: {
onUpload() {
this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Toast />
<div class="content-section implementation">
<div class="card">
<h5>Advanced</h5>
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
<h5>Basic</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<h5>Advanced</h5>
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
<h5>Basic with Auto</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
</div>
<h5>Basic</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<h5>Basic with Auto</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
</template>
@ -407,13 +366,51 @@ export default {
this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Toast />
<h5>Advanced</h5>
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
<h5>Basic</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<h5>Basic with Auto</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
</template>
<script>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
export default {
setup() {
const toast = useToast();
const onUpload = () => {
toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
}
return { onUpload };
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

442
src/views/overlaypanel/OverlayPanelDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small">
<h5>Import</h5>
<pre v-code.script><code>
import OverlayPanel from 'primevue/overlaypanel';
</code></pre>
<h5>Getting Started</h5>
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
<h5>Getting Started</h5>
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
<pre v-code><code>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
@ -26,9 +24,9 @@ toggle(event) {
</code></pre>
<h5>Dismissable and CloseIcon</h5>
<p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior.
Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
<h5>Dismissable and CloseIcon</h5>
<p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior.
Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
<pre v-code><code>
&lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
@ -36,9 +34,9 @@ toggle(event) {
</code></pre>
<h5>Responsive</h5>
<p>OverlayPanel width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 450px and below 961px, width would be 75vw and finally below 641px width becomes
100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
<h5>Responsive</h5>
<p>OverlayPanel width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 450px and below 961px, width would be 75vw and finally below 641px width becomes
100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
<pre v-code><code>
&lt;OverlayPanel ref="op" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '450px'}"&gt;
@ -47,156 +45,161 @@ toggle(event) {
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>dismissable</td>
<td>boolean</td>
<td>true</td>
<td>Enables to hide the overlay when outside is clicked.</td>
</tr>
<tr>
<td>showCloseIcon</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, displays a close icon at top right corner.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>dismissable</td>
<td>boolean</td>
<td>true</td>
<td>Enables to hide the overlay when outside is clicked.</td>
</tr>
<tr>
<td>showCloseIcon</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, displays a close icon at top right corner.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event <br />
target: Optional target if event.target should not be used</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event <br />
target: Optional target if event.target should not be used</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-overlaypanel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-overlaypanel-content</td>
<td>Content of the panel.</td>
</tr>
<tr>
<td>p-overlaypanel-close</td>
<td>Close icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-overlaypanel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-overlaypanel-content</td>
<td>Content of the panel.</td>
</tr>
<tr>
<td>p-overlaypanel-close</td>
<td>Close icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/overlaypanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small" :toastService="true" :components="['Button', 'DataTable', 'Column']" />
</div>
<pre v-code><code><template v-pre>
&lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}"&gt;
&lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
&lt;Column field="name" header="Name" sortable style="width: 50%"&gt;&lt;/Column&gt;
&lt;Column header="Image" style="width: 20%"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable style="width: 30%"&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/OverlayPanel&gt;
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
</code></pre>
<pre v-code.script><code>
import ProductService from '../../service/ProductService';
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect" responsiveLayout="scroll" >
<Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image" style="width: 20%">
<template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" sortable style="width: 30%">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</OverlayPanel>
</div>
</template>
<script>
import ProductService from './service/ProductService';
export default {
data() {
@ -225,77 +228,79 @@ export default {
}
}
}
<\\/script>
</code></pre>
</TabPanel>
</TabView>
</div>
</template>
<style lang="scss" scoped>
button {
min-width: 15rem;
}
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
.product-image {
width: 50px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Toast />
<div class="content-section implementation">
<div class="card">
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect">
<Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image"style="width: 20%">
<template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" sortable style="width: 30%">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</OverlayPanel>
</div>
</div>
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect" responsiveLayout="scroll" >
<Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image" style="width: 20%">
<template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" sortable style="width: 30%">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</OverlayPanel>
</div>
</template>
<script>
import ProductService from '../service/ProductService';
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import ProductService from './service/ProductService';
export default {
data() {
return {
products: null,
selectedProduct: null
}
},
productService: null,
created() {
this.productService = new ProductService();
},
mounted() {
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
toggle(event) {
this.$refs.op.toggle(event);
},
formatCurrency(value) {
setup() {
onMounted(() => {
productService.value.getProductsSmall().then(data => products.value = data);
})
const toast = useToast();
const op = ref();
const productService = ref(new ProductService());
const products = ref();
const selectedProduct = ref();
const toggle = (event) => {
op.value.toggle(event);
};
const formatCurrency = (value) => {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
},
onProductSelect(event) {
this.$refs.op.hide();
this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
}
};
const onProductSelect = (event) => {
op.value.hide();
toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
};
return { op, productService, products, selectedProduct, toggle, formatCurrency, onProductSelect}
}
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
button {
min-width: 15rem;
}
@ -308,9 +313,6 @@ button {
}
}
}
},
components: {
LiveEditor
}
}
</script>

490
src/views/sidebar/SidebarDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="SidebarDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Sidebar from 'primevue/sidebar';
</code></pre>
<h5>Getting Started</h5>
<p>Sidebar is used as a container and visibility is controlled with the <i>visible</i> property that requires a v-model two-way binding.</p>
<h5>Getting Started</h5>
<p>Sidebar is used as a container and visibility is controlled with the <i>visible</i> property that requires a v-model two-way binding.</p>
<pre v-code><code>
&lt;Sidebar v-model:visible="visibleLeft"&gt;
Content
@ -19,8 +17,8 @@ import Sidebar from 'primevue/sidebar';
</code></pre>
<h5>Position</h5>
<p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
<h5>Position</h5>
<p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
<pre v-code><code>
&lt;Sidebar v-model:visible="visibleRight" position="right"&gt;
Content
@ -28,8 +26,8 @@ import Sidebar from 'primevue/sidebar';
</code></pre>
<h5>Size</h5>
<p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
<h5>Size</h5>
<p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
<pre v-code><code>
&lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-sm"&gt;&lt;/Sidebar&gt;
&lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-md"&gt;&lt;/Sidebar&gt;
@ -37,8 +35,8 @@ import Sidebar from 'primevue/sidebar';
</code></pre>
<h5>Full Screen</h5>
<p>Full screen mode allows the sidebar to cover whole screen.</p>
<h5>Full Screen</h5>
<p>Full screen mode allows the sidebar to cover whole screen.</p>
<pre v-code><code>
&lt;Sidebar v-model:visible="visibleFull" position="full"&gt;
Content
@ -47,255 +45,198 @@ import Sidebar from 'primevue/sidebar';
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>visible</td>
<td>boolean</td>
<td>false</td>
<td>Specifies the visibility of the dialog.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>left</td>
<td>Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>dismissable</td>
<td>boolean</td>
<td>true</td>
<td>Whether clicking outside closes the panel.</td>
</tr>
<tr>
<td>showCloseIcon</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display a close icon inside the panel.</td>
</tr>
<tr>
<td>modal</td>
<td>boolean</td>
<td>true</td>
<td>Whether to a modal layer behind the sidebar.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>visible</td>
<td>boolean</td>
<td>false</td>
<td>Specifies the visibility of the dialog.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>left</td>
<td>Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>dismissable</td>
<td>boolean</td>
<td>true</td>
<td>Whether clicking outside closes the panel.</td>
</tr>
<tr>
<td>showCloseIcon</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display a close icon inside the panel.</td>
</tr>
<tr>
<td>modal</td>
<td>boolean</td>
<td>true</td>
<td>Whether to a modal layer behind the sidebar.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when sidebar gets hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when sidebar gets shown.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when sidebar gets hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when sidebar gets shown.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-sidebar</td>
<td>Container element</td>
</tr>
<tr>
<td>p-sidebar-left</td>
<td>Container element of left sidebar.</td>
</tr>
<tr>
<td>p-sidebar-right</td>
<td>Container element of right sidebar.</td>
</tr>
<tr>
<td>p-sidebar-top</td>
<td>Container element of top sidebar.</td>
</tr>
<tr>
<td>p-sidebar-bottom</td>
<td>Container element of bottom sidebar.</td>
</tr>
<tr>
<td>p-sidebar-full</td>
<td>Container element of a full screen sidebar.</td>
</tr>
<tr>
<td>p-sidebar-active</td>
<td>Container element when sidebar is visible.</td>
</tr>
<tr>
<td>p-sidebar-close</td>
<td>Close anchor element.</td>
</tr>
<tr>
<td>p-sidebar-sm</td>
<td>Small sized sidebar.</td>
</tr>
<tr>
<td>p-sidebar-md</td>
<td>Medium sized sidebar.</td>
</tr>
<tr>
<td>p-sidebar-lg</td>
<td>Large sized sidebar.</td>
</tr>
<tr>
<td>p-sidebar-mask</td>
<td>Modal layer of the sidebar.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-sidebar</td>
<td>Container element</td>
</tr>
<tr>
<td>p-sidebar-left</td>
<td>Container element of left sidebar.</td>
</tr>
<tr>
<td>p-sidebar-right</td>
<td>Container element of right sidebar.</td>
</tr>
<tr>
<td>p-sidebar-top</td>
<td>Container element of top sidebar.</td>
</tr>
<tr>
<td>p-sidebar-bottom</td>
<td>Container element of bottom sidebar.</td>
</tr>
<tr>
<td>p-sidebar-full</td>
<td>Container element of a full screen sidebar.</td>
</tr>
<tr>
<td>p-sidebar-active</td>
<td>Container element when sidebar is visible.</td>
</tr>
<tr>
<td>p-sidebar-close</td>
<td>Close anchor element.</td>
</tr>
<tr>
<td>p-sidebar-sm</td>
<td>Small sized sidebar.</td>
</tr>
<tr>
<td>p-sidebar-md</td>
<td>Medium sized sidebar.</td>
</tr>
<tr>
<td>p-sidebar-lg</td>
<td>Large sized sidebar.</td>
</tr>
<tr>
<td>p-sidebar-mask</td>
<td>Modal layer of the sidebar.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/sidebar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="SidebarDemo" :sources="sources" :components="['Button']"/>
</div>
<pre v-code><code><template v-pre>
&lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-th-large" @click="visibleFull = true" /&gt;
&lt;Sidebar v-model:visible="visibleLeft" :baseZIndex="1000"&gt;
&lt;h3&gt;Left Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right"&gt;
&lt;h3&gt;Right Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top"&gt;
&lt;h3&gt;Top Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom"&gt;
&lt;h3&gt;Bottom Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full"&gt;
&lt;h3&gt;Full Screen&lt;/h3&gt;
&lt;/Sidebar&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
visibleLeft: false,
visibleRight: false,
visibleTop: false,
visibleBottom: false,
visibleFull: false
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h3>Left Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h3>Left Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
<h3>Right Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
<h3>Right Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
<h3>Top Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
<h3>Top Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
<h3>Bottom Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
<h3>Bottom Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
<h3>Full Screen</h3>
</Sidebar>
</div>
</div>
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
<h3>Full Screen</h3>
</Sidebar>
</div>
</template>
@ -310,13 +251,62 @@ export default {
visibleFull: false
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h3>Left Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
<h3>Right Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
<h3>Top Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
<h3>Bottom Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
<h3>Full Screen</h3>
</Sidebar>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const visibleLeft = ref(false);
const visibleRight = ref(false);
const visibleTop = ref(false);
const visibleBottom = ref(false);
const visibleFull = ref(false);
return { visibleLeft, visibleRight, visibleTop, visibleBottom, visibleFull }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

219
src/views/tooltip/TooltipDoc.vue
View File

@ -1,9 +1,7 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Getting Started</h5>
<p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
<AppDoc name="TooltipDemo" :sources="sources">
<h5>Getting Started</h5>
<p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
<pre v-code.script><code>
import Tooltip from 'primevue/tooltip';
@ -11,7 +9,7 @@ Vue.directive('tooltip', Tooltip);
</code></pre>
<p>Tooltip can also be configured locally using the directives property of your component.</p>
<p>Tooltip can also be configured locally using the directives property of your component.</p>
<pre v-code.script><code>
directives: {
'tooltip': Tooltip
@ -19,14 +17,14 @@ directives: {
</code></pre>
<p>Once the tooltip is configured, it can be attached to a target using the v- prefix.</p>
<p>Once the tooltip is configured, it can be attached to a target using the v- prefix.</p>
<pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip="'Enter your username'" /&gt;
</template>
</code></pre>
<h5>Positions</h5>
<p>There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using a modifier.</p>
<h5>Positions</h5>
<p>There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using a modifier.</p>
<pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip.right="'Enter your username'" /&gt;
&lt;InputText type="text" v-tooltip.top="'Enter your username'" /&gt;
@ -35,140 +33,131 @@ directives: {
</template>
</code></pre>
<h5>Events</h5>
<p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.</p>
<h5>Events</h5>
<p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.</p>
<pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip.focus="'Enter your username'" /&gt;
</template>
</code></pre>
<h5>Modifiers</h5>
<p>As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below,
gets displayed at the top of the input at focus event.
</p>
<h5>Modifiers</h5>
<p>As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below,
gets displayed at the top of the input at focus event.
</p>
<pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip.top.focus="'Enter your username'" /&gt;
</template>
</code></pre>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tooltip</td>
<td>Input element.</td>
</tr>
<tr>
<td>p-tooltip-arrow</td>
<td>Arrow of the tooltip.</td>
</tr>
<tr>
<td>p-tooltip-text</td>
<td>Text of the tooltip</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tooltip</td>
<td>Input element.</td>
</tr>
<tr>
<td>p-tooltip-arrow</td>
<td>Arrow of the tooltip.</td>
</tr>
<tr>
<td>p-tooltip-text</td>
<td>Text of the tooltip</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tooltip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TooltipDemo" :sources="sources" :directives="['Tooltip']" :components="['InputText', 'Button']"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Positions&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Focus and Blur&lt;/h3&gt;
&lt;InputText type="text" placeholder="Focus" v-tooltip.bottom.focus="'Enter your username'" /&gt;
&lt;h3&gt;Button&lt;/h3&gt;
&lt;Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Positions</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
</div>
</div>
<h5>Focus and Blur</h5>
<InputText type="text" placeholder="Focus" v-tooltip.bottom.focus="'Enter your username'" />
<h5>Button</h5>
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Positions</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
</div>
</div>
<h5>Focus and Blur</h5>
<InputText type="text" placeholder="Focus" v-tooltip.bottom.focus="'Enter your username'" />
<h5>Button</h5>
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
</div>
</template>
<script>
export default {
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Positions</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
</div>
</div>
<h5>Focus and Blur</h5>
<InputText type="text" placeholder="Focus" v-tooltip.bottom.focus="'Enter your username'" />
<h5>Button</h5>
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
</div>
</template>
<script>
export default {
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>