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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
}, },
reject: () => { 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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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> <template>
<div class="content-section documentation"> <AppDoc name="ConfirmDialogDemo" :sources="sources">
<TabView> <h5>ConfirmationService</h5>
<TabPanel header="Documentation"> <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
<h5>ConfirmationService</h5> instance is created.</p>
<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> <pre v-code.script><code>
import {createApp} from 'vue'; import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice'; import ConfirmationService from 'primevue/confirmationservice';
@ -14,15 +12,15 @@ app.use(ConfirmationService);
</code></pre> </code></pre>
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import ConfirmDialog from 'primevue/confirmdialog'; import ConfirmDialog from 'primevue/confirmdialog';
</code></pre> </code></pre>
<h5>Getting Started</h5> <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 <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> where it can be shared by any component within the application.</p>
<pre v-code><code> <pre v-code><code>
&lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt; &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
@ -50,8 +48,8 @@ export default {
</code></pre> </code></pre>
<h5>Composition API</h5> <h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p> <p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code> <pre v-code.script><code>
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm"; import { useConfirm } from "primevue/useconfirm";
@ -75,8 +73,8 @@ export default defineComponent({
</code></pre> </code></pre>
<h5>Close Confirmation</h5> <h5>Close Confirmation</h5>
<p>The dialog can also be hidden programmatically using the <i>close</i> method.</p> <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
methods: { methods: {
@ -88,287 +86,196 @@ export default {
</code></pre> </code></pre>
<h5>Responsive</h5> <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 <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> 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> <pre v-code><code>
&lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt; &lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt;
</code></pre> </code></pre>
<h5>Confirmation Options</h5> <h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p> <p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>message</td> <td>message</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Message of the confirmation.</td> <td>Message of the confirmation.</td>
</tr> </tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon to display next to the message.</td> <td>Icon to display next to the message.</td>
</tr> </tr>
<tr> <tr>
<td>header</td> <td>header</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Header text of the dialog.</td> <td>Header text of the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>accept</td> <td>accept</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is confirmed.</td> <td>Callback to execute when action is confirmed.</td>
</tr> </tr>
<tr> <tr>
<td>reject</td> <td>reject</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is rejected.</td> <td>Callback to execute when action is rejected.</td>
</tr> </tr>
<tr> <tr>
<td>acceptLabel</td> <td>acceptLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>rejectLabel</td> <td>rejectLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>acceptIcon</td> <td>acceptIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the accept button.</td> <td>Icon of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectIcon</td> <td>rejectIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the reject button.</td> <td>Icon of the reject button.</td>
</tr> </tr>
<tr> <tr>
<td>acceptClass</td> <td>acceptClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the accept button.</td> <td>Style class of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectClass</td> <td>rejectClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the reject button.</td> <td>Style class of the reject button.</td>
</tr> </tr>
<tr> <tr>
<td>blockScroll</td> <td>blockScroll</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether background scroll should be blocked when dialog is visible.</td> <td>Whether background scroll should be blocked when dialog is visible.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Properties</h5> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
<tr> <tr>
<td>breakpoints</td> <td>breakpoints</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Object literal to define widths per screen size.</td> <td>Object literal to define widths per screen size.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-confirm-dialog</td> <td>p-confirm-dialog</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<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>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<template>
<div>
<Toast /> <Toast />
<div class="content-section implementation"> <ConfirmDialog></ConfirmDialog>
<ConfirmDialog></ConfirmDialog> <ConfirmDialog group="positionDialog"></ConfirmDialog>
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="p-grid p-dir-col">
<div class="p-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('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> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div> </div>
<div class="p-col"> <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('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('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> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
</div> </div>
<div class="p-col"> <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('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('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> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -387,7 +294,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
}, },
reject: () => { 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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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': {
content: `<template> tabName: 'Composition API',
<div class="layout-content"> content: `
<template>
<div>
<Toast /> <Toast />
<div class="content-section implementation"> <ConfirmDialog></ConfirmDialog>
<ConfirmDialog></ConfirmDialog> <ConfirmDialog group="positionDialog"></ConfirmDialog>
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="p-grid p-dir-col">
<div class="p-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('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> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div> </div>
<div class="p-col"> <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('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('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> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
</div> </div>
<div class="p-col"> <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('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('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> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -477,7 +386,7 @@ export default defineComponent({
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000}); toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
}, },
reject: () => { 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}); toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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}); toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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 }; return { confirm1, confirm2, confirmPosition };
} }
});` });
<\\/script>
`
} }
} }
} }
},
components: {
LiveEditor
} }
} }
</script> </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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
}, },
reject: () => { 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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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> <template>
<div class="content-section documentation"> <AppDoc name="ConfirmPopupDemo" :sources="sources">
<TabView> <h5>ConfirmationService</h5>
<TabPanel header="Documentation"> <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
<h5>ConfirmationService</h5> instance is created.</p>
<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> <pre v-code.script><code>
import {createApp} from 'vue'; import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice'; import ConfirmationService from 'primevue/confirmationservice';
@ -14,15 +12,15 @@ app.use(ConfirmationService);
</code></pre> </code></pre>
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import ConfirmPopup from 'primevue/confirmpopup'; import ConfirmPopup from 'primevue/confirmpopup';
</code></pre> </code></pre>
<h5>Getting Started</h5> <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. <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> <i>target</i> attribute is mandatory to align the popup to its caller.</p>
<pre v-code><code> <pre v-code><code>
&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt; &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
@ -50,8 +48,8 @@ export default {
</code></pre> </code></pre>
<h5>Composition API</h5> <h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p> <p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code> <pre v-code.script><code>
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm"; import { useConfirm } from "primevue/useconfirm";
@ -79,8 +77,8 @@ export default defineComponent({
</code></pre> </code></pre>
<h5>Close Confirmation</h5> <h5>Close Confirmation</h5>
<p>The popup can also be hidden programmatically using the <i>close</i> method.</p> <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
methods: { methods: {
@ -92,230 +90,174 @@ export default {
</code></pre> </code></pre>
<h5>Confirmation Options</h5> <h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p> <p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>target</td> <td>target</td>
<td>DomElement</td> <td>DomElement</td>
<td>null</td> <td>null</td>
<td>Element to align the overlay.</td> <td>Element to align the overlay.</td>
</tr> </tr>
<tr> <tr>
<td>message</td> <td>message</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Message of the confirmation.</td> <td>Message of the confirmation.</td>
</tr> </tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon to display next to the message.</td> <td>Icon to display next to the message.</td>
</tr> </tr>
<tr> <tr>
<td>accept</td> <td>accept</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is confirmed.</td> <td>Callback to execute when action is confirmed.</td>
</tr> </tr>
<tr> <tr>
<td>reject</td> <td>reject</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is rejected.</td> <td>Callback to execute when action is rejected.</td>
</tr> </tr>
<tr> <tr>
<td>acceptLabel</td> <td>acceptLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>rejectLabel</td> <td>rejectLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>acceptIcon</td> <td>acceptIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the accept button.</td> <td>Icon of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectIcon</td> <td>rejectIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the reject button.</td> <td>Icon of the reject button.</td>
</tr> </tr>
<tr> <tr>
<td>acceptClass</td> <td>acceptClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the accept button.</td> <td>Style class of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectClass</td> <td>rejectClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the reject button.</td> <td>Style class of the reject button.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Properties</h5> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-confirm-popup</td> <td>p-confirm-popup</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-content</td> <td>p-confirm-content</td>
<td>Content element.</td> <td>Content element.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-popup-icon</td> <td>p-confirm-popup-icon</td>
<td>Message icon.</td> <td>Message icon.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-popup-message</td> <td>p-confirm-popup-message</td>
<td>Message text.</td> <td>Message text.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-popup-footer</td> <td>p-confirm-popup-footer</td>
<td>Footer element for buttons.</td> <td>Footer element for buttons.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<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>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<template>
<div>
<ConfirmPopup></ConfirmPopup>
<Toast /> <Toast />
<div class="content-section implementation">
<ConfirmPopup></ConfirmPopup>
<div class="card"> <div class="card">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <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> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -332,7 +274,7 @@ export default {
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
}, },
reject: () => { 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}); this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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> content: `<template>
<div class="layout-content"> <div>
<ConfirmPopup></ConfirmPopup>
<Toast /> <Toast />
<div class="content-section implementation">
<ConfirmPopup></ConfirmPopup>
<div class="card"> <div class="card">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <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> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -387,7 +330,7 @@ export default defineComponent({
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000}); toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
}, },
reject: () => { 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}); toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
}, },
reject: () => { 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 }; return { confirm1, confirm2 };
}, },
}) })
<\\/script>
` `
} }
} }
} }
},
components: {
LiveEditor
} }
} }
</script> </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> <template>
<div class="content-section documentation"> <AppDoc name="FileUploadDemo" :sources="sources">
<TabView> <h5>Import</h5>
<TabPanel header="Documentation">
<h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import FileUpload from 'primevue/fileupload'; import FileUpload from 'primevue/fileupload';
</code></pre> </code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" /&gt; &lt;FileUpload name="demo[]" url="./upload" /&gt;
</code></pre> </code></pre>
<h5>Multiple Uploads</h5> <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> <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> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt; &lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
</code></pre> </code></pre>
<h5>Basic UI</h5> <h5>Basic UI</h5>
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p> <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
</code></pre> </code></pre>
<h5>DragDrop</h5> <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> <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> <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> <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> <pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
</code></pre> </code></pre>
<h5>File Types</h5> <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> <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> <pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
</code></pre> </code></pre>
<h5>File Size and File Linit</h5> <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> <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> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt; &lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
</code></pre> </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> <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> <ul>
<li> <li>
invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.' invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'
</li> </li>
<li> <li>
invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.' invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'
</li> </li>
</ul> </ul>
<h5>Request Customization</h5> <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> <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> <h5>Custom Upload</h5>
<p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p> <p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt; &lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
@ -80,8 +78,8 @@ myUploader(event) {
</code></pre> </code></pre>
<h5>Empty Template</h5> <h5>Empty Template</h5>
<p>When there is no file selected, you may use the empty slot to display content.</p> <p>When there is no file selected, you may use the empty slot to display content.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" /&gt; &lt;FileUpload name="demo[]" url="./upload" /&gt;
&lt;template #empty&gt; &lt;template #empty&gt;
@ -91,312 +89,273 @@ myUploader(event) {
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>name</td> <td>name</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Name of the request parameter to identify the files at backend.</td> <td>Name of the request parameter to identify the files at backend.</td>
</tr> </tr>
<tr> <tr>
<td>url</td> <td>url</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Remote url to upload the files.</td> <td>Remote url to upload the files.</td>
</tr> </tr>
<tr> <tr>
<td>mode</td> <td>mode</td>
<td>string</td> <td>string</td>
<td>advanced</td> <td>advanced</td>
<td>Defines the UI of the component, possible values are "advanced" and "basic".</td> <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
</tr> </tr>
<tr> <tr>
<td>multiple</td> <td>multiple</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Used to select multiple files at once from file dialog.</td> <td>Used to select multiple files at once from file dialog.</td>
</tr> </tr>
<tr> <tr>
<td>accept</td> <td>accept</td>
<td>string</td> <td>string</td>
<td>false</td> <td>false</td>
<td>Pattern to restrict the allowed file types such as "image/*".</td> <td>Pattern to restrict the allowed file types such as "image/*".</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Disables the upload functionality.</td> <td>Disables the upload functionality.</td>
</tr> </tr>
<tr> <tr>
<td>auto</td> <td>auto</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When enabled, upload begins automatically after selection is completed.</td> <td>When enabled, upload begins automatically after selection is completed.</td>
</tr> </tr>
<tr> <tr>
<td>maxFileSize</td> <td>maxFileSize</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Maximum file size allowed in bytes.</td> <td>Maximum file size allowed in bytes.</td>
</tr> </tr>
<tr> <tr>
<td>invalidFileSizeMessage</td> <td>invalidFileSizeMessage</td>
<td>string</td> <td>string</td>
<td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</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> <td>Message of the invalid fize size.</td>
</tr> </tr>
<tr> <tr>
<td>invalidFileLimitMessage</td> <td>invalidFileLimitMessage</td>
<td>string</td> <td>string</td>
<td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</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> <td>Message to display when number of files to be uploaded exceeeds the limit.</td>
</tr> </tr>
<tr> <tr>
<td>fileLimit</td> <td>fileLimit</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Maximum number of files that can be uploaded.</td> <td>Maximum number of files that can be uploaded.</td>
</tr> </tr>
<tr> <tr>
<td>withCredentials</td> <td>withCredentials</td>
<td>boolean</td> <td>boolean</td>
<td>false</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> <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
</tr> </tr>
<tr> <tr>
<td>previewWidth</td> <td>previewWidth</td>
<td>number</td> <td>number</td>
<td>50</td> <td>50</td>
<td>Width of the image thumbnail in pixels.</td> <td>Width of the image thumbnail in pixels.</td>
</tr> </tr>
<tr> <tr>
<td>chooseLabel</td> <td>chooseLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>uploadLabel</td> <td>uploadLabel</td>
<td>string</td> <td>string</td>
<td>Upload</td> <td>Upload</td>
<td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>cancelLabel</td> <td>cancelLabel</td>
<td>string</td> <td>string</td>
<td>Cancel</td> <td>Cancel</td>
<td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>customUpload</td> <td>customUpload</td>
<td>boolean</td> <td>boolean</td>
<td>false</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> <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>
<tr> <tr>
<td>showUploadButton</td> <td>showUploadButton</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to show the upload button.</td> <td>Whether to show the upload button.</td>
</tr> </tr>
<tr> <tr>
<td>showCancelButton</td> <td>showCancelButton</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to show the cancel button.</td> <td>Whether to show the cancel button.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div classe="doc-tablewrapper"> <div classe="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>before-upload</td> <td>before-upload</td>
<td>event.xhr: XmlHttpRequest instance. <br/> <td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td> event.formData: FormData object.</td>
<td>Callback to invoke before file upload begins to customize the request <td>Callback to invoke before file upload begins to customize the request
such as post parameters before the files.</td> such as post parameters before the files.</td>
</tr> </tr>
<tr> <tr>
<td>before-send</td> <td>before-send</td>
<td>event.xhr: XmlHttpRequest instance. <br/> <td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td> event.formData: FormData object.</td>
<td>Callback to invoke before file send begins to customize the request <td>Callback to invoke before file send begins to customize the request
such as adding headers.</td> such as adding headers.</td>
</tr> </tr>
<tr> <tr>
<td>upload</td> <td>upload</td>
<td>event.xhr: XmlHttpRequest instance.<br /> <td>event.xhr: XmlHttpRequest instance.<br />
event.files: Uploaded files.</td> event.files: Uploaded files.</td>
<td>Callback to invoke when file upload is complete.</td> <td>Callback to invoke when file upload is complete.</td>
</tr> </tr>
<tr> <tr>
<td>error</td> <td>error</td>
<td>event.xhr: XmlHttpRequest instance.<br /> <td>event.xhr: XmlHttpRequest instance.<br />
event.files: Files that are not uploaded.</td> event.files: Files that are not uploaded.</td>
<td>Callback to invoke if file upload fails.</td> <td>Callback to invoke if file upload fails.</td>
</tr> </tr>
<tr> <tr>
<td>clear</td> <td>clear</td>
<td>-.</td> <td>-.</td>
<td>Callback to invoke when files in queue are removed without uploading.</td> <td>Callback to invoke when files in queue are removed without uploading.</td>
</tr> </tr>
<tr> <tr>
<td>select</td> <td>select</td>
<td>event.originalEvent: Original browser event. <br /> <td>event.originalEvent: Original browser event. <br />
event.files: List of selected files.</td> event.files: List of selected files.</td>
<td>Callback to invoke when file upload is complete.</td> <td>Callback to invoke when file upload is complete.</td>
</tr> </tr>
<tr> <tr>
<td>progress</td> <td>progress</td>
<td>event.originalEvent: Original browser event. <br /> <td>event.originalEvent: Original browser event. <br />
event.progress: Calculated progress value.</td> event.progress: Calculated progress value.</td>
<td>Callback to invoke when files are selected.</td> <td>Callback to invoke when files are selected.</td>
</tr> </tr>
<tr> <tr>
<td>uploader</td> <td>uploader</td>
<td>event.files: List of selected files.</td> <td>event.files: List of selected files.</td>
<td>Callback to invoke to implement a custom upload.</td> <td>Callback to invoke to implement a custom upload.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>empty</td> <td>empty</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-fileupload</td> <td>p-fileupload</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-buttonbar</td> <td>p-fileupload-buttonbar</td>
<td>Header containing the buttons.</td> <td>Header containing the buttons.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-content</td> <td>p-fileupload-content</td>
<td>Content section.</td> <td>Content section.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<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>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<template>
<div class="card">
<Toast /> <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> <h5>Advanced</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" /> <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> <h5>Basic</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" /> <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
</div>
</div> <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>
</template> </template>
@ -407,13 +366,51 @@ export default {
this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000}); 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> </script>

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

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

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

@ -1,15 +1,13 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="SidebarDemo" :sources="sources">
<TabView> <h5>Import</h5>
<TabPanel header="Documentation">
<h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Sidebar from 'primevue/sidebar'; import Sidebar from 'primevue/sidebar';
</code></pre> </code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code><code>
&lt;Sidebar v-model:visible="visibleLeft"&gt; &lt;Sidebar v-model:visible="visibleLeft"&gt;
Content Content
@ -19,8 +17,8 @@ import Sidebar from 'primevue/sidebar';
</code></pre> </code></pre>
<h5>Position</h5> <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> <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> <pre v-code><code>
&lt;Sidebar v-model:visible="visibleRight" position="right"&gt; &lt;Sidebar v-model:visible="visibleRight" position="right"&gt;
Content Content
@ -28,8 +26,8 @@ import Sidebar from 'primevue/sidebar';
</code></pre> </code></pre>
<h5>Size</h5> <h5>Size</h5>
<p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p> <p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
<pre v-code><code> <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-sm"&gt;&lt;/Sidebar&gt;
&lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-md"&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> </code></pre>
<h5>Full Screen</h5> <h5>Full Screen</h5>
<p>Full screen mode allows the sidebar to cover whole screen.</p> <p>Full screen mode allows the sidebar to cover whole screen.</p>
<pre v-code><code> <pre v-code><code>
&lt;Sidebar v-model:visible="visibleFull" position="full"&gt; &lt;Sidebar v-model:visible="visibleFull" position="full"&gt;
Content Content
@ -47,255 +45,198 @@ import Sidebar from 'primevue/sidebar';
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>visible</td> <td>visible</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Specifies the visibility of the dialog.</td> <td>Specifies the visibility of the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>position</td> <td>position</td>
<td>string</td> <td>string</td>
<td>left</td> <td>left</td>
<td>Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".</td> <td>Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".</td>
</tr> </tr>
<tr> <tr>
<td>baseZIndex</td> <td>baseZIndex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Base zIndex value to use in layering.</td> <td>Base zIndex value to use in layering.</td>
</tr> </tr>
<tr> <tr>
<td>autoZIndex</td> <td>autoZIndex</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to automatically manage layering.</td> <td>Whether to automatically manage layering.</td>
</tr> </tr>
<tr> <tr>
<td>dismissable</td> <td>dismissable</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether clicking outside closes the panel.</td> <td>Whether clicking outside closes the panel.</td>
</tr> </tr>
<tr> <tr>
<td>showCloseIcon</td> <td>showCloseIcon</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to display a close icon inside the panel.</td> <td>Whether to display a close icon inside the panel.</td>
</tr> </tr>
<tr> <tr>
<td>modal</td> <td>modal</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to a modal layer behind the sidebar.</td> <td>Whether to a modal layer behind the sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>ariaCloseLabel</td> <td>ariaCloseLabel</td>
<td>string</td> <td>string</td>
<td>close</td> <td>close</td>
<td>Aria label of the close icon.</td> <td>Aria label of the close icon.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>hide</td> <td>hide</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when sidebar gets hidden.</td> <td>Callback to invoke when sidebar gets hidden.</td>
</tr> </tr>
<tr> <tr>
<td>show</td> <td>show</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when sidebar gets shown.</td> <td>Callback to invoke when sidebar gets shown.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-sidebar</td> <td>p-sidebar</td>
<td>Container element</td> <td>Container element</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-left</td> <td>p-sidebar-left</td>
<td>Container element of left sidebar.</td> <td>Container element of left sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-right</td> <td>p-sidebar-right</td>
<td>Container element of right sidebar.</td> <td>Container element of right sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-top</td> <td>p-sidebar-top</td>
<td>Container element of top sidebar.</td> <td>Container element of top sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-bottom</td> <td>p-sidebar-bottom</td>
<td>Container element of bottom sidebar.</td> <td>Container element of bottom sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-full</td> <td>p-sidebar-full</td>
<td>Container element of a full screen sidebar.</td> <td>Container element of a full screen sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-active</td> <td>p-sidebar-active</td>
<td>Container element when sidebar is visible.</td> <td>Container element when sidebar is visible.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-close</td> <td>p-sidebar-close</td>
<td>Close anchor element.</td> <td>Close anchor element.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-sm</td> <td>p-sidebar-sm</td>
<td>Small sized sidebar.</td> <td>Small sized sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-md</td> <td>p-sidebar-md</td>
<td>Medium sized sidebar.</td> <td>Medium sized sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-lg</td> <td>p-sidebar-lg</td>
<td>Large sized sidebar.</td> <td>Large sized sidebar.</td>
</tr> </tr>
<tr> <tr>
<td>p-sidebar-mask</td> <td>p-sidebar-mask</td>
<td>Modal layer of the sidebar.</td> <td>Modal layer of the sidebar.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<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>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /> <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-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-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-arrow-up" @click="visibleBottom = true" class="p-mr-2" />
<Button icon="pi pi-th-large" @click="visibleFull = true" /> <Button icon="pi pi-th-large" @click="visibleFull = true" />
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000"> <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h3>Left Sidebar</h3> <h3>Left Sidebar</h3>
</Sidebar> </Sidebar>
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right"> <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
<h3>Right Sidebar</h3> <h3>Right Sidebar</h3>
</Sidebar> </Sidebar>
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top"> <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
<h3>Top Sidebar</h3> <h3>Top Sidebar</h3>
</Sidebar> </Sidebar>
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom"> <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
<h3>Bottom Sidebar</h3> <h3>Bottom Sidebar</h3>
</Sidebar> </Sidebar>
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full"> <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
<h3>Full Screen</h3> <h3>Full Screen</h3>
</Sidebar> </Sidebar>
</div>
</div>
</div> </div>
</template> </template>
@ -310,13 +251,62 @@ export default {
visibleFull: false 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> </script>

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

@ -1,9 +1,7 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="TooltipDemo" :sources="sources">
<TabView> <h5>Getting Started</h5>
<TabPanel header="Documentation"> <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>
<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> <pre v-code.script><code>
import Tooltip from 'primevue/tooltip'; import Tooltip from 'primevue/tooltip';
@ -11,7 +9,7 @@ Vue.directive('tooltip', Tooltip);
</code></pre> </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> <pre v-code.script><code>
directives: { directives: {
'tooltip': Tooltip 'tooltip': Tooltip
@ -19,14 +17,14 @@ directives: {
</code></pre> </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> <pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip="'Enter your username'" /&gt; &lt;InputText type="text" v-tooltip="'Enter your username'" /&gt;
</template> </template>
</code></pre> </code></pre>
<h5>Positions</h5> <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> <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> <pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip.right="'Enter your username'" /&gt; &lt;InputText type="text" v-tooltip.right="'Enter your username'" /&gt;
&lt;InputText type="text" v-tooltip.top="'Enter your username'" /&gt; &lt;InputText type="text" v-tooltip.top="'Enter your username'" /&gt;
@ -35,140 +33,131 @@ directives: {
</template> </template>
</code></pre> </code></pre>
<h5>Events</h5> <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> <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> <pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip.focus="'Enter your username'" /&gt; &lt;InputText type="text" v-tooltip.focus="'Enter your username'" /&gt;
</template> </template>
</code></pre> </code></pre>
<h5>Modifiers</h5> <h5>Modifiers</h5>
<p>As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below, <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. gets displayed at the top of the input at focus event.
</p> </p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;InputText type="text" v-tooltip.top.focus="'Enter your username'" /&gt; &lt;InputText type="text" v-tooltip.top.focus="'Enter your username'" /&gt;
</template> </template>
</code></pre> </code></pre>
<h5>Styling</h5> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-tooltip</td> <td>p-tooltip</td>
<td>Input element.</td> <td>Input element.</td>
</tr> </tr>
<tr> <tr>
<td>p-tooltip-arrow</td> <td>p-tooltip-arrow</td>
<td>Arrow of the tooltip.</td> <td>Arrow of the tooltip.</td>
</tr> </tr>
<tr> <tr>
<td>p-tooltip-text</td> <td>p-tooltip-text</td>
<td>Text of the tooltip</td> <td>Text of the tooltip</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<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>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<h5>Positions</h5> <h5>Positions</h5>
<div class="p-grid p-fluid"> <div class="p-grid p-fluid">
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" /> <InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
</div> </div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" /> <InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
</div> </div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" /> <InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
</div> </div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" /> <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> </div>
</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> </div>
</template> </template>
<script> <script>
export default { 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> </script>