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

Pages updated v3.21.0

pull/3420/head
Bahadır Sofuoğlu 2022-12-08 15:26:57 +03:00
parent defd6ff6e2
commit edc9695de0
246 changed files with 33769 additions and 28188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@ -39,8 +39,10 @@ export default {
this.$appState.announcement = data;
const itemString = localStorage.getItem(this.storageKey);
if (itemString) {
const item = JSON.parse(itemString);
if (item.hiddenNews && item.hiddenNews !== data.id) {
this.$appState.newsActive = true;
} else this.$appState.newsActive = false;

2
layouts/AppMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="['layout-sidebar', { active: active }]">
<nuxt-link to="/" class="logo">
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
<img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
</nuxt-link>
<div class="layout-sidebar-filter p-fluid">
<AutoComplete

23
layouts/AppNews.vue
View File

@ -1,20 +1,18 @@
<template>
<ClientOnly>
<div class="layout-news" :style="$appState?.announcement?.backgroundStyle">
<i></i>
<div class="layout-news-content">
<span class="layout-news-text" :style="$appState?.announcement?.textStyle">{{ $appState?.announcement?.content }}</span>
<a class="layout-news-link" :href="$appState?.announcement?.linkHref">{{ $appState?.announcement?.linkText }}</a>
</div>
<a class="layout-news-close" :style="$appState?.announcement?.textStyle" @click="onClose">
<span class="pi pi-times"></span>
</a>
<div class="layout-news" :style="$appState.announcement.backgroundStyle">
<i></i>
<div class="layout-news-content">
<span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span>
<a class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
</div>
</ClientOnly>
<a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
<span class="pi pi-times"></span>
</a>
</div>
</template>
<script>
import EventBus from './AppEventBus';
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
@ -33,6 +31,7 @@ export default {
const item = {
hiddenNews: this.$appState.announcement.id
};
localStorage.setItem(this.storageKey, JSON.stringify(item));
}
}

2
pages/accessibility/index.vue
View File

@ -200,7 +200,7 @@
<div class="flex align-items-center">
<label for="binary" class="mr-2">Remember Me</label>
<Checkbox id="binary" binary v-model="checked" />
<Checkbox id="binary" v-model="checked" binary />
</div>
<h5>Colors</h5>

596
pages/accordion/AccordionDoc.vue
View File

@ -1,24 +1,23 @@
<template>
<ClientOnly>
<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
<pre v-code><code>
&lt;Accordion&gt;
&lt;AccordionTab header="Header I"&gt;
Content
@ -33,9 +32,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre>
<h5>Active</h5>
<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
<pre v-code><code>
<h5>Active</h5>
<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
<pre v-code><code>
&lt;Accordion :activeIndex="0"&gt;
&lt;AccordionTab header="Header I"&gt;
Content
@ -50,8 +49,8 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre>
<p>Two-way binding requires v-model.</p>
<pre v-code><code>
<p>Two-way binding requires v-model.</p>
<pre v-code><code>
&lt;Accordion v-model:activeIndex="activeIndex"&gt;
&lt;AccordionTab header="Header I"&gt;
Content
@ -66,9 +65,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre>
<h5>Multiple</h5>
<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p>
<pre v-code><code>
<h5>Multiple</h5>
<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p>
<pre v-code><code>
&lt;Accordion :multiple="true"&gt;
&lt;AccordionTab header="Header I"&gt;
Content
@ -83,9 +82,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre>
<h5>Disabled</h5>
<p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
<pre v-code><code>
<h5>Disabled</h5>
<p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
<pre v-code><code>
&lt;Accordion&gt;
&lt;AccordionTab header="Header I"&gt;
Content
@ -100,9 +99,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre>
<h5>Custom Content at Headers</h5>
<p>Custom content for the title section of a panel is defined using the header template.</p>
<pre v-code><code>
<h5>Custom Content at Headers</h5>
<p>Custom content for the title section of a panel is defined using the header template.</p>
<pre v-code><code>
&lt;Accordion&gt;
&lt;AccordionTab&gt;
&lt;template #header&gt;
@ -129,14 +128,14 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre>
<h5>Programmatic Control</h5>
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
<pre v-code><code>
<h5>Programmatic Control</h5>
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
<pre v-code><code>
&lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
&lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
&lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
&lt;Accordion :multiple="true" :activeIdex="active"&gt;
&lt;Accordion :multiple="true" :activeIndex="active"&gt;
&lt;AccordionTab header="Header I"&gt;
Content
&lt;/AccordionTab&gt;
@ -150,7 +149,7 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
data() {
return {
@ -161,9 +160,9 @@ export default {
</code></pre>
<h5>Dynamic Tabs</h5>
<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
<pre v-code><code><template v-pre>
<h5>Dynamic Tabs</h5>
<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
<pre v-code><code><template v-pre>
&lt;Accordion&gt;
&lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
&lt;p&gt;{{tab.content}}&lt;/p&gt;
@ -172,7 +171,7 @@ export default {
</template>
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
data() {
return {
@ -187,13 +186,13 @@ export default {
</code></pre>
<h5>Lazy Rendering</h5>
<p>
All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
rendering performance if there are many tabs.
</p>
<h5>Lazy Rendering</h5>
<p>
All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
rendering performance if there are many tabs.
</p>
<pre v-code><code>
<pre v-code><code>
&lt;Accordion lazy&gt;
&lt;AccordionTab header="Header I"&gt;
Content
@ -208,273 +207,272 @@ export default {
</code></pre>
<h5>Properties of AccordionTab</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Orientation of tab headers.</td>
</tr>
<tr>
<td>headerStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the tab header.</td>
</tr>
<tr>
<td>headerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab header.</td>
</tr>
<tr>
<td>headerProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the tab header.</td>
</tr>
<tr>
<td>headerActionProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
</tr>
<tr>
<td>contentStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the tab content.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab content.</td>
</tr>
<tr>
<td>contentProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>Whether the tab is disabled.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties of AccordionTab</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Orientation of tab headers.</td>
</tr>
<tr>
<td>headerStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the tab header.</td>
</tr>
<tr>
<td>headerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab header.</td>
</tr>
<tr>
<td>headerProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the tab header.</td>
</tr>
<tr>
<td>headerActionProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
</tr>
<tr>
<td>contentStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the tab content.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab content.</td>
</tr>
<tr>
<td>contentProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>Whether the tab is disabled.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties of Accordion</h5>
<p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, multiple tabs can be activated at the same time.</td>
</tr>
<tr>
<td>activeIndex</td>
<td>number|array</td>
<td>null</td>
<td>Index of the active tab or an array of indexes in multiple mode.</td>
</tr>
<tr>
<td>lazy</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
</tr>
<tr>
<td>expandIcon</td>
<td>string</td>
<td>pi-chevron-right</td>
<td>Icon of a collapsed tab.</td>
</tr>
<tr>
<td>collapseIcon</td>
<td>string</td>
<td>pi-chevron-down</td>
<td>Icon of an expanded tab.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>0</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>selectOnFocus</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, the focused tab is activated.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties of Accordion</h5>
<p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, multiple tabs can be activated at the same time.</td>
</tr>
<tr>
<td>activeIndex</td>
<td>number|array</td>
<td>null</td>
<td>Index of the active tab or an array of indexes in multiple mode.</td>
</tr>
<tr>
<td>lazy</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
</tr>
<tr>
<td>expandIcon</td>
<td>string</td>
<td>pi-chevron-right</td>
<td>Icon of a collapsed tab.</td>
</tr>
<tr>
<td>collapseIcon</td>
<td>string</td>
<td>pi-chevron-down</td>
<td>Icon of an expanded tab.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>0</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>selectOnFocus</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, the focused tab is activated.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>tab-open</td>
<td>
event.originalEvent: Browser event <br />
event.index: Opened tab index
</td>
<td>Callback to invoke when a tab gets expanded.</td>
</tr>
<tr>
<td>tab-close</td>
<td>
event.originalEvent: Browser event <br />
event.index: Closed tab index
</td>
<td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
</tr>
<tr>
<td>tab-click</td>
<td>
event.originalEvent: Browser event <br />
event.index: Index of the clicked tab
</td>
<td>Callback to invoke when an active tab is clicked.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>tab-open</td>
<td>
event.originalEvent: Browser event <br />
event.index: Opened tab index
</td>
<td>Callback to invoke when a tab gets expanded.</td>
</tr>
<tr>
<td>tab-close</td>
<td>
event.originalEvent: Browser event <br />
event.index: Closed tab index
</td>
<td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
</tr>
<tr>
<td>tab-click</td>
<td>
event.originalEvent: Browser event <br />
event.index: Index of the clicked tab
</td>
<td>Callback to invoke when an active tab is clicked.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-accordion</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-accordion-header</td>
<td>Header of a tab.</td>
</tr>
<tr>
<td>p-accordion-content</td>
<td>Container of a tab.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-accordion</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-accordion-header</td>
<td>Header of a tab.</td>
</tr>
<tr>
<td>p-accordion-content</td>
<td>Container of a tab.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
</p>
<p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value of
the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
</p>
<p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
<h6>Header Keyboard Support</h6>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the next the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last header.</td>
</tr>
</tbody>
</table>
</div>
<h6>Header Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the next focusable element in the page tab sequence.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last header.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

1314
pages/autocomplete/AutoCompleteDoc.vue
View File

File diff suppressed because it is too large Load Diff

6
pages/autocomplete/index.vue
View File

@ -38,7 +38,7 @@
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" optionLabel="name" />
<AutoComplete v-model="selectedCountries" :multiple="true" :suggestions="filteredCountries" @complete="searchCountry($event)" optionLabel="name" />
</span>
</div>
</div>
@ -48,9 +48,9 @@
</template>
<script>
import { FilterMatchMode, FilterService } from 'primevue/api';
import CountryService from '../../service/CountryService';
import AutoCompleteDoc from './AutoCompleteDoc';
import { FilterService, FilterMatchMode } from 'primevue/api';
export default {
data() {
@ -124,6 +124,7 @@ export default {
for (let country of this.groupedCities) {
let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
if (filteredItems && filteredItems.length) {
filteredCities.push({ ...country, ...{ items: filteredItems } });
}
@ -138,6 +139,7 @@ export default {
for (let i = 0; i < this.items.length; i++) {
let item = this.items[i];
if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
filteredItems.push(item);
}

330
pages/avatar/AvatarDoc.vue
View File

@ -1,40 +1,39 @@
<template>
<ClientOnly>
<AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<pre v-code><code>
&lt;Avatar label="P" /&gt;
&lt;Avatar icon="pi pi-search" /&gt;
&lt;Avatar image="user.png" /&gt;
</code></pre>
<h5>Sizes</h5>
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<pre v-code><code>
<h5>Sizes</h5>
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<pre v-code><code>
&lt;Avatar label="P" size="large"/&gt;
</code></pre>
<h5>AvatarGroup</h5>
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
<pre v-code><code>
<h5>AvatarGroup</h5>
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
<pre v-code><code>
&lt;AvatarGroup&gt;
&lt;Avatar label="P" /&gt;
&lt;Avatar icon="pi pi-search" /&gt;
@ -44,164 +43,185 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre>
<h5>Shape</h5>
<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
<pre v-code><code>
<h5>Shape</h5>
<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
<pre v-code><code>
&lt;Avatar label="P" shape="circle"/&gt;
</code></pre>
<h5>Badge</h5>
<p>A badge can be added to an Avatar with the <nuxt-link to="/badge">Badge</nuxt-link> directive.</p>
<pre v-code><code>
<h5>Badge</h5>
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
<pre v-code><code>
&lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
</code></pre>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
&lt;Avatar&gt;
Content
&lt;/Avatar&gt;
</code></pre>
<h5>Properties of Avatar</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the element, valid options are "large" and "xlarge".</td>
</tr>
<tr>
<td>shape</td>
<td>string</td>
<td>square</td>
<td>Shape of the element, valid options are "square" and "circle".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties of Avatar</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the element, valid options are "large" and "xlarge".</td>
</tr>
<tr>
<td>shape</td>
<td>string</td>
<td>square</td>
<td>Shape of the element, valid options are "square" and "circle".</td>
</tr>
<tr>
<td>aria-label</td>
<td>string</td>
<td>null</td>
<td>Defines a string value that labels an interactive element.</td>
</tr>
<tr>
<td>aria-labelledby</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties of AvatarGroup</h5>
<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
<h5>Properties of AvatarGroup</h5>
<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>error</td>
<td>-</td>
<td>Triggered when an error occurs while loading an image file.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>error</td>
<td>-</td>
<td>Triggered when an error occurs while loading an image file.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of Avatar</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-avatar-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-avatar-circle</td>
<td>Container element with a circle shape.</td>
</tr>
<tr>
<td>p-avatar-text</td>
<td>Text of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-icon</td>
<td>Icon of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-lg</td>
<td>Container element with a large size.</td>
</tr>
<tr>
<td>p-avatar-xl</td>
<td>Container element with an xlarge size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of Avatar</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-avatar-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-avatar-circle</td>
<td>Container element with a circle shape.</td>
</tr>
<tr>
<td>p-avatar-text</td>
<td>Text of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-icon</td>
<td>Icon of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-lg</td>
<td>Container element with a large size.</td>
</tr>
<tr>
<td>p-avatar-xl</td>
<td>Container element with an xlarge size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of AvatarGroup</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of AvatarGroup</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
</p>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -498,7 +518,7 @@ export default {
<script type="module">
const { createApp } = Vue;
const BadgeDirective = primevue.badgedirective;
const App = {
components: {
"p-avatar": primevue.avatar,

22
pages/avatar/index.vue
View File

@ -31,7 +31,7 @@
<div class="col-12 md:col-4">
<div class="card">
<h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color: #4caf4f; color: #ffffff" v-badge="4" />
<Avatar v-badge="4" label="U" size="xlarge" style="background-color: #4caf4f; color: #ffffff" />
</div>
</div>
</div>
@ -58,7 +58,7 @@
<div class="col-12 md:col-4">
<div class="card">
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4" />
<Avatar v-badge="4" icon="pi pi-user" size="xlarge" />
</div>
</div>
</div>
@ -67,9 +67,9 @@
<div class="col-12 md:col-4">
<div class="card">
<h5>Image</h5>
<Avatar image="/demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="/demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="/demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
<Avatar image="demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
</div>
</div>
@ -77,11 +77,11 @@
<div class="card">
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<Avatar image="/demo/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="/demo/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="/demo/images/avatar/onyamalimba.png" size="large" shape="circle" />
<Avatar image="/demo/images/avatar/ionibowcher.png" size="large" shape="circle" />
<Avatar image="/demo/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar label="+2" shape="circle" size="large" style="background-color: #9c27b0; color: #ffffff" />
</AvatarGroup>
</div>
@ -90,7 +90,7 @@
<div class="col-12 md:col-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar image="/demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
<Avatar v-badge.danger="4" image="demo/images/organization/walter.jpg" size="xlarge" />
</div>
</div>
</div>

270
pages/badge/BadgeDoc.vue
View File

@ -1,198 +1,206 @@
<template>
<ClientOnly>
<AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
<h5>Getting Started</h5>
<p>Badge can either be used as a standalone component or as a directive.</p>
<AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
<h5>Getting Started</h5>
<p>Badge can either be used as a standalone component or as a directive.</p>
<h5>Component</h5>
<h6>Import via Module</h6>
<pre v-code.script><code>
<h5>Component</h5>
<h6>Import via Module</h6>
<pre v-code.script><code>
import Badge from 'primevue/badge';
</code></pre>
<h6>Import via CDN</h6>
<pre v-code><code>
<h6>Import via CDN</h6>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/badge/badge.min.js"&gt;&lt;/script&gt;
</code></pre>
<p>Content of the badge is specified using the <i>value</i> property.</p>
<pre v-code><code>
<p>Content of the badge is specified using the <i>value</i> property.</p>
<pre v-code><code>
&lt;Badge value="2"&gt;&lt;/Badge&gt;
</code></pre>
<h5>Directive</h5>
<h6>Import via Module</h6>
<pre v-code.script><code>
<h5>Directive</h5>
<h6>Import via Module</h6>
<pre v-code.script><code>
import BadgeDirective from 'primevue/badgedirective';
</code></pre>
<h6>Import via CDN</h6>
<pre v-code><code>
<h6>Import via CDN</h6>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"&gt;&lt;/script&gt;
</code></pre>
<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
<pre v-code.script><code>
<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
<pre v-code.script><code>
import BadgeDirective from 'primevue/badgedirective';
app.directive('badge', BadgeDirective);
</code></pre>
<p>Next step is attaching it to an element.</p>
<pre v-code><code>
<p>Next step is attaching it to an element.</p>
<pre v-code><code>
&lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
</code></pre>
<h5>Severities</h5>
<p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
<h5>Severities</h5>
<p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>
<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>
<pre v-code><code>
<pre v-code><code>
&lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
&lt;i class="pi pi-bell" v-badge.success="2"&gt;&lt;/i&gt;
</code></pre>
<h5>Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
<h5>Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
<pre v-code><code>
<pre v-code><code>
&lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
</code></pre>
<h5>Sizes</h5>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p>
<pre v-code><code>
<h5>Sizes</h5>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p>
<pre v-code><code>
&lt;Badge value="2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
&lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
</code></pre>
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<pre v-code><code>
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<pre v-code><code>
&lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;
</code></pre>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<pre v-code><code>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<pre v-code><code>
&lt;Badge&gt;
Content
&lt;/Badge&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value to display inside the badge.</td>
</tr>
<tr>
<td>severity</td>
<td>string</td>
<td>null</td>
<td>Severity type of the badge.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the badge, valid options are "large" and "xlarge".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value to display inside the badge.</td>
</tr>
<tr>
<td>severity</td>
<td>string</td>
<td>null</td>
<td>Severity type of the badge.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the badge, valid options are "large" and "xlarge".</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-badge</td>
<td>Badge element</td>
</tr>
<tr>
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-dot</td>
<td>Badge element with no value.</td>
</tr>
<tr>
<td>p-badge-success</td>
<td>Badge element with success severity.</td>
</tr>
<tr>
<td>p-badge-info</td>
<td>Badge element with info severity.</td>
</tr>
<tr>
<td>p-badge-warning</td>
<td>Badge element with warning severity.</td>
</tr>
<tr>
<td>p-badge-danger</td>
<td>Badge element with danger severity.</td>
</tr>
<tr>
<td>p-badge-lg</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-xl</td>
<td>Extra large badge element</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-badge</td>
<td>Badge element</td>
</tr>
<tr>
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-dot</td>
<td>Badge element with no value.</td>
</tr>
<tr>
<td>p-badge-success</td>
<td>Badge element with success severity.</td>
</tr>
<tr>
<td>p-badge-info</td>
<td>Badge element with info severity.</td>
</tr>
<tr>
<td>p-badge-warning</td>
<td>Badge element with warning severity.</td>
</tr>
<tr>
<td>p-badge-danger</td>
<td>Badge element with danger severity.</td>
</tr>
<tr>
<td>p-badge-lg</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-xl</td>
<td>Extra large badge element</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
<i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
</p>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -206,7 +214,7 @@ export default {
<template>
<div>
<h5>Numbers</h5>
<Badge value="2" class="mr-2"></Badge>
<Badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></Badge>
<Badge value="8" severity="success" class="mr-2"></Badge>
<Badge value="4" severity="info" class="mr-2"></Badge>
<Badge value="12" severity="warning" class="mr-2"></Badge>
@ -240,7 +248,7 @@ export default {
<template>
<div>
<h5>Numbers</h5>
<Badge value="2" class="mr-2"></Badge>
<Badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></Badge>
<Badge value="8" severity="success" class="mr-2"></Badge>
<Badge value="4" severity="info" class="mr-2"></Badge>
<Badge value="12" severity="warning" class="mr-2"></Badge>
@ -273,7 +281,7 @@ export default {
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
content: `<div id="app">
<h5>Numbers</h5>
<p-badge value="2" class="mr-2"></p-badge>
<p-badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></p-badge>
<p-badge value="8" severity="success" class="mr-2"></p-badge>
<p-badge value="4" severity="info" class="mr-2"></p-badge>
<p-badge value="12" severity="warning" class="mr-2"></p-badge>

8
pages/badge/index.vue
View File

@ -11,16 +11,16 @@
<div class="content-section implementation">
<div class="card">
<h5>Numbers</h5>
<Badge value="2" class="mr-2"></Badge>
<Badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></Badge>
<Badge value="8" severity="success" class="mr-2"></Badge>
<Badge value="4" severity="info" class="mr-2"></Badge>
<Badge value="12" severity="warning" class="mr-2"></Badge>
<Badge value="3" severity="danger"></Badge>
<h5 class="mb-4">Positioned Badge</h5>
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<i v-badge="2" class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem"></i>
<i v-badge.danger="'10+'" class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem"></i>
<i v-badge.danger class="pi pi-envelope p-text-secondary" style="font-size: 2rem"></i>
<h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="mr-2" />

219
pages/blockui/BlockUIDoc.vue
View File

@ -1,25 +1,24 @@
<template>
<ClientOnly>
<AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import BlockUI from 'primevue/blockui';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>
BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable
is set to false.
</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>
BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is
set to false.
</p>
<pre v-code><code>
&lt;BlockUI :blocked="blockedPanel"&gt;
&lt;Panel header="Header"&gt;
Panel Content
@ -28,7 +27,7 @@ import BlockUI from 'primevue/blockui';
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
data() {
return {
@ -47,107 +46,115 @@ export default {
</code></pre>
<h5>Full Screen</h5>
<p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
<h5>Full Screen</h5>
<p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
<pre v-code><code>
<pre v-code><code>
&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>blocked</td>
<td>array</td>
<td>null</td>
<td>Controls the blocked state.</td>
</tr>
<tr>
<td>fullscreen</td>
<td>menuitem</td>
<td>null</td>
<td>When enabled, the whole document gets blocked.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>blocked</td>
<td>array</td>
<td>null</td>
<td>Controls the blocked state.</td>
</tr>
<tr>
<td>fullscreen</td>
<td>menuitem</td>
<td>null</td>
<td>When enabled, the whole document gets blocked.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>block</td>
<td>-</td>
<td>Fired when the element gets blocked.</td>
</tr>
<tr>
<td>unblock</td>
<td>-</td>
<td>Fired when the element gets unblocked.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>block</td>
<td>-</td>
<td>Fired when the element gets blocked.</td>
</tr>
<tr>
<td>unblock</td>
<td>-</td>
<td>Fired when the element gets unblocked.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-blockui</td>
<td>Mask element.</td>
</tr>
<tr>
<td>p-blockui-document</td>
<td>Mask element in full screen mode.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-blockui</td>
<td>Mask element.</td>
</tr>
<tr>
<td>p-blockui-document</td>
<td>Mask element in full screen mode.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
</p>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

255
pages/breadcrumb/BreadcrumbDoc.vue
View File

@ -1,30 +1,29 @@
<template>
<ClientOnly>
<AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Breadcrumb from 'primevue/breadcrumb';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>MenuModel</h5>
<p>Breadcrumb uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>MenuModel</h5>
<p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
<pre v-code><code>
&lt;Breadcrumb :home="home" :model="items" /&gt;
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
data() {
return {
@ -42,9 +41,9 @@ export default {
</code></pre>
<h5>Templating</h5>
<p>Breadcrumb offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code><template v-pre>
<h5>Templating</h5>
<p>Breadcrumb offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code><template v-pre>
&lt;Breadcrumb :home="home" :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
@ -53,106 +52,142 @@ export default {
</template>
</code></pre>
<p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre>
&lt;Breadcrumb :home="home" :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/nuxt-link&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/Breadcrumb&gt;
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>home</td>
<td>menuitem</td>
<td>null</td>
<td>Configuration for the home icon.</td>
</tr>
<tr>
<td>exact</td>
<td>boolean</td>
<td>true</td>
<td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>home</td>
<td>menuitem</td>
<td>null</td>
<td>Configuration for the home icon.</td>
</tr>
<tr>
<td>exact</td>
<td>boolean</td>
<td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr>
<tr>
<td>aria-label</td>
<td>string</td>
<td>null</td>
<td>Defines a string value that labels an interactive element.</td>
</tr>
<tr>
<td>aria-labelledby</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>item: Menuitem instance</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>item: Menuitem instance</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-breadcrumb</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-breadcrumb-chevron</td>
<td>Chevron element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-breadcrumb</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-breadcrumb-list</td>
<td>Ordered list element.</td>
</tr>
<tr>
<td>p-breadcrumb-home</td>
<td>First list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-link</td>
<td>Link element of the menuitem.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
</p>
<h6>Keyboard Support</h6>
<p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -165,7 +200,7 @@ export default {
content: `
<template>
<div>
<Breadcrumb :home="home" :model="items" />
<Breadcrumb :home="home" :model="items" aria-label="breadcrumb" />
</div>
</template>
@ -174,7 +209,7 @@ export default {
data() {
return {
home: {
icon: 'pi pi-home',
icon: 'pi pi-home',
to: '/',
},
items: [
@ -195,7 +230,7 @@ export default {
content: `
<template>
<div>
<Breadcrumb :home="home" :model="items" />
<Breadcrumb :home="home" :model="items" aria-label="breadcrumb" />
</div>
</template>
@ -205,7 +240,7 @@ import { ref } from 'vue';
export default {
setup() {
const home = ref({
icon: 'pi pi-home',
icon: 'pi pi-home',
to: '/',
});
const items = ref([
@ -227,7 +262,7 @@ export default {
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"><\\/script>`,
content: `<div id="app">
<p-breadcrumb :home="home" :model="items"></p-breadcrumb>
<p-breadcrumb :home="home" :model="items" aria-label="breadcrumb"></p-breadcrumb>
</div>
<script type="module">
@ -237,7 +272,7 @@ export default {
const App = {
setup() {
const home = ref({
icon: 'pi pi-home',
icon: 'pi pi-home',
to: '/',
});
const items = ref([

4
pages/breadcrumb/index.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<Breadcrumb :home="home" :model="items" />
<Breadcrumb :home="home" :model="items" aria-label="breadcrumb" />
</div>
</div>
@ -25,7 +25,7 @@ export default {
data() {
return {
home: { icon: 'pi pi-home', to: '/' },
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item', to: '/breadcrumb' }]
};
},
components: {

961
pages/button/ButtonDoc.vue
View File

File diff suppressed because it is too large Load Diff

1536
pages/calendar/CalendarDoc.vue
View File

File diff suppressed because it is too large Load Diff

70
pages/calendar/index.vue
View File

@ -14,59 +14,59 @@
<div class="p-fluid grid formgrid">
<div class="field col-12 md:col-4">
<label for="basic">Basic</label>
<Calendar inputId="basic" v-model="date1" autocomplete="off" />
<Calendar v-model="date1" inputId="basic" autocomplete="off" />
</div>
<div class="field col-12 md:col-4">
<label for="dateformat">DateFormat</label>
<Calendar inputId="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
<Calendar v-model="date2" inputId="dateformat" dateFormat="mm-dd-yy" />
</div>
<div class="field col-12 md:col-4">
<label for="icon">Icon</label>
<Calendar inputId="icon" v-model="date3" :showIcon="true" />
<Calendar v-model="date3" inputId="icon" :showIcon="true" />
</div>
<div class="field col-12 md:col-4">
<label for="minmax">MinMax</label>
<Calendar inputId="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
<Calendar v-model="date4" inputId="minmax" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div>
<div class="field col-12 md:col-4">
<label for="disableddays">Disabled Days</label>
<Calendar inputId="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0, 6]" :manualInput="false" />
<Calendar v-model="date5" inputId="disableddays" :disabledDates="invalidDates" :disabledDays="[0, 6]" :manualInput="false" />
</div>
<div class="field col-12 md:col-4">
<label for="multiple">Multiple</label>
<Calendar inputId="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
<Calendar v-model="dates1" inputId="multiple" selectionMode="multiple" :manualInput="false" />
</div>
<div class="field col-12 md:col-4">
<label for="range">Range</label>
<Calendar inputId="range" v-model="dates2" selectionMode="range" :manualInput="false" />
<Calendar v-model="dates2" inputId="range" selectionMode="range" :manualInput="false" />
</div>
<div class="field col-12 md:col-4">
<label for="buttonbar">Button Bar</label>
<Calendar inputId="buttonbar" v-model="date6" :showButtonBar="true" />
<Calendar v-model="date6" inputId="buttonbar" :showButtonBar="true" />
</div>
<div class="field col-12 md:col-4">
<label for="time24">Time / 24h</label>
<Calendar inputId="time24" v-model="date7" :showTime="true" :showSeconds="true" />
<Calendar v-model="date7" inputId="time24" :showTime="true" :showSeconds="true" />
</div>
<div class="field col-12 md:col-4">
<label for="time12">Time / 12h</label>
<Calendar inputId="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
<Calendar v-model="date8" inputId="time12" :timeOnly="true" hourFormat="12" />
</div>
<div class="field col-12 md:col-4">
<label for="monthpicker">Month Picker</label>
<Calendar inputId="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
<Calendar v-model="date9" inputId="monthpicker" view="month" dateFormat="mm/yy" />
</div>
<div class="field col-12 md:col-4">
<label for="yearpicker">Year Picker</label>
<Calendar inputId="yearpicker" v-model="date10" view="year" dateFormat="yy" />
<Calendar v-model="date10" inputId="yearpicker" view="year" dateFormat="yy" />
</div>
<div class="field col-12 md:col-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar inputId="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
<Calendar v-model="date11" inputId="multiplemonths" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div>
<div class="field col-12 md:col-4">
<label for="datetemplate">Date Template</label>
<Calendar inputId="datetemplate" v-model="date12">
<Calendar v-model="date12" inputId="datetemplate">
<template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{ slotProps.date.day }}</strong>
<template v-else>{{ slotProps.date.day }}</template>
@ -75,7 +75,7 @@
</div>
<div class="field col-12 md:col-4">
<label for="touchUI">TouchUI</label>
<Calendar inputId="touchUI" v-model="date13" :touchUI="true" />
<Calendar v-model="date13" inputId="touchUI" :touchUI="true" />
</div>
</div>
@ -92,25 +92,6 @@
import CalendarDoc from './CalendarDoc';
export default {
created() {
let today = new Date();
let month = today.getMonth();
let year = today.getFullYear();
let prevMonth = month === 0 ? 11 : month - 1;
let prevYear = prevMonth === 11 ? year - 1 : year;
let nextMonth = month === 11 ? 0 : month + 1;
let nextYear = nextMonth === 0 ? year + 1 : year;
this.minDate = new Date();
this.minDate.setMonth(prevMonth);
this.minDate.setFullYear(prevYear);
this.maxDate = new Date();
this.maxDate.setMonth(nextMonth);
this.maxDate.setFullYear(nextYear);
let invalidDate = new Date();
invalidDate.setDate(today.getDate() - 1);
this.invalidDates = [today, invalidDate];
},
data() {
return {
date1: null,
@ -144,6 +125,27 @@ export default {
]
};
},
created() {
let today = new Date();
let month = today.getMonth();
let year = today.getFullYear();
let prevMonth = month === 0 ? 11 : month - 1;
let prevYear = prevMonth === 11 ? year - 1 : year;
let nextMonth = month === 11 ? 0 : month + 1;
let nextYear = nextMonth === 0 ? year + 1 : year;
this.minDate = new Date();
this.minDate.setMonth(prevMonth);
this.minDate.setFullYear(prevYear);
this.maxDate = new Date();
this.maxDate.setMonth(nextMonth);
this.maxDate.setFullYear(nextYear);
let invalidDate = new Date();
invalidDate.setDate(today.getDate() - 1);
this.invalidDates = [today, invalidDate];
},
components: {
CalendarDoc: CalendarDoc
}

181
pages/card/CardDoc.vue
View File

@ -1,25 +1,24 @@
<template>
<ClientOnly>
<AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Card from 'primevue/card';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/card/card.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
<pre v-code><code>
&lt;Card&gt;
&lt;template #header&gt;
&lt;img alt="user header" src="/demo/images/usercard.png"&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt;
&lt;/template&gt;
&lt;template #title&gt;
Advanced Card
@ -36,98 +35,96 @@ import Card from 'primevue/card';
</code></pre>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>-</td>
</tr>
<tr>
<td>subtitle</td>
<td>-</td>
</tr>
<tr>
<td>content</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>-</td>
</tr>
<tr>
<td>subtitle</td>
<td>-</td>
</tr>
<tr>
<td>content</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-card</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-card-title</td>
<td>Title element.</td>
</tr>
<tr>
<td>p-card-subtitle</td>
<td>Subtitle element.</td>
</tr>
<tr>
<td>p-card-content</td>
<td>Content of the card.</td>
</tr>
<tr>
<td>p-card-footer</td>
<td>Footer of the card.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-card</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-card-title</td>
<td>Title element.</td>
</tr>
<tr>
<td>p-card-subtitle</td>
<td>Subtitle element.</td>
</tr>
<tr>
<td>p-card-content</td>
<td>Content of the card.</td>
</tr>
<tr>
<td>p-card-footer</td>
<td>Footer of the card.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
require to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
</p>
<h5>Accessibility</h5>
<pre v-code><code>
<h6>Screen Reader</h6>
<p>
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require
to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
</p>
<pre v-code><code>
&lt;Card role="region"&gt;
Content
&lt;/Card&gt;
</code></pre>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
</DevelopmentSection>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

2
pages/card/index.vue
View File

@ -21,7 +21,7 @@
<Card style="width: 25em">
<template #header>
<img alt="user header" src="/demo/images/usercard.png" />
<img alt="user header" src="demo/images/usercard.png" />
</template>
<template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template>

525
pages/carousel/CarouselDoc.vue
View File

@ -1,22 +1,21 @@
<template>
<ClientOnly>
<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Carousel from 'primevue/carousel';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<pre v-code><code>
&lt;Carousel :value="cars"&gt;
&lt;template #item="slotProps"&gt;
&lt;/template&gt;
@ -24,9 +23,9 @@ import Carousel from 'primevue/carousel';
</code></pre>
<h5>Items per page and Scroll Items</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<pre v-code><code>
<h5>Items per page and Scroll Items</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
&lt;template #item="slotProps"&gt;
&lt;/template&gt;
@ -34,9 +33,9 @@ import Carousel from 'primevue/carousel';
</code></pre>
<h5>Responsive</h5>
<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p>
<pre v-code><code><template v-pre>
<h5>Responsive</h5>
<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p>
<pre v-code><code><template v-pre>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
@ -45,7 +44,7 @@ import Carousel from 'primevue/carousel';
&lt;div class="car-item"&gt;
&lt;div class="car-content"&gt;
&lt;div&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
@ -63,7 +62,7 @@ import Carousel from 'primevue/carousel';
&lt;/Carousel&gt;
</template>
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
data() {
return {
responsiveOptions: [
@ -88,10 +87,10 @@ data() {
</code></pre>
<h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p>
<h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p>
<pre v-code><code>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h2&gt;Custom Header&lt;/h2&gt;
@ -106,9 +105,9 @@ data() {
</code></pre>
<h5>Orientation</h5>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<pre v-code><code>
<h5>Orientation</h5>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
&lt;template #item="slotProps"&gt;
Content
@ -117,11 +116,9 @@ data() {
</code></pre>
<h5>AutoPlay and Circular</h5>
<p>
When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
</p>
<pre v-code><code>
<h5>AutoPlay and Circular</h5>
<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
&lt;template #header&gt;
&lt;h2&gt;Circular, AutoPlay&lt;/h2&gt;
@ -133,186 +130,304 @@ data() {
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>An array of objects to display.</td>
</tr>
<tr>
<td>page</td>
<td>number</td>
<td>null</td>
<td>Index of the first item.</td>
</tr>
<tr>
<td>circular</td>
<td>boolean</td>
<td>false</td>
<td>Defines if scrolling would be infinite.</td>
</tr>
<tr>
<td>autoplayInterval</td>
<td>number</td>
<td>null</td>
<td>Time in milliseconds to scroll items automatically.</td>
</tr>
<tr>
<td>numVisible</td>
<td>number</td>
<td>1</td>
<td>Number of items per page.</td>
</tr>
<tr>
<td>numScroll</td>
<td>number</td>
<td>1</td>
<td>Number of items to scroll.</td>
</tr>
<tr>
<td>responsiveOptions</td>
<td>any</td>
<td>null</td>
<td>An array of options for responsive design.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
</tr>
<tr>
<td>verticalViewPortHeight</td>
<td>string</td>
<td>300px</td>
<td>Height of the viewport in vertical layout.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of main content.</td>
</tr>
<tr>
<td>containerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the viewport container.</td>
</tr>
<tr>
<td>indicatorsContentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the indicator items.</td>
</tr>
<tr>
<td>showNavigators</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display navigation buttons in container.</td>
</tr>
<tr>
<td>showIndicators</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display indicator container.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>An array of objects to display.</td>
</tr>
<tr>
<td>page</td>
<td>number</td>
<td>null</td>
<td>Index of the first item.</td>
</tr>
<tr>
<td>circular</td>
<td>boolean</td>
<td>false</td>
<td>Defines if scrolling would be infinite.</td>
</tr>
<tr>
<td>autoplayInterval</td>
<td>number</td>
<td>null</td>
<td>Time in milliseconds to scroll items automatically.</td>
</tr>
<tr>
<td>numVisible</td>
<td>number</td>
<td>1</td>
<td>Number of items per page.</td>
</tr>
<tr>
<td>numScroll</td>
<td>number</td>
<td>1</td>
<td>Number of items to scroll.</td>
</tr>
<tr>
<td>responsiveOptions</td>
<td>any</td>
<td>null</td>
<td>An array of options for responsive design.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
</tr>
<tr>
<td>verticalViewPortHeight</td>
<td>string</td>
<td>300px</td>
<td>Height of the viewport in vertical layout.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of main content.</td>
</tr>
<tr>
<td>containerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the viewport container.</td>
</tr>
<tr>
<td>indicatorsContentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the indicator items.</td>
</tr>
<tr>
<td>showNavigators</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display navigation buttons in container.</td>
</tr>
<tr>
<td>showIndicators</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display indicator container.</td>
</tr>
<tr>
<td>prevButtonProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLButtonElement to the previous navigation button.</td>
</tr>
<tr>
<td>nextButtonProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLButtonElement to the next navigation button.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>item</td>
<td>
data: Data of the component<br />
index: Index of the item
</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>item</td>
<td>
data: Data of the component<br />
index: Index of the item
</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-carousel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-carousel-header</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-carousel-footer</td>
<td>Footer section.</td>
</tr>
<tr>
<td>p-carousel-content</td>
<td>Main content element. It contains the container of the viewport.</td>
</tr>
<tr>
<td>p-carousel-container</td>
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
</tr>
<tr>
<td>p-carousel-items-content</td>
<td>Viewport.</td>
</tr>
<tr>
<td>p-carousel-indicators</td>
<td>Container of the indicators.</td>
</tr>
<tr>
<td>p-carousel-indicator</td>
<td>Indicator element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-carousel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-carousel-header</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-carousel-footer</td>
<td>Footer section.</td>
</tr>
<tr>
<td>p-carousel-content</td>
<td>Main content element. It contains the container of the viewport.</td>
</tr>
<tr>
<td>p-carousel-container</td>
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
</tr>
<tr>
<td>p-carousel-items-content</td>
<td>Viewport.</td>
</tr>
<tr>
<td>p-carousel-indicators</td>
<td>Container of the indicators.</td>
</tr>
<tr>
<td>p-carousel-indicator</td>
<td>Indicator element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
<i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
</p>
<p>
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of
the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p>
<p>
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by default
respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
</p>
<p>Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i>.</p>
<h6>Next/Prev Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through interactive elements in the carousel.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates navigation.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates navigation.</td>
</tr>
</tbody>
</table>
</div>
<h6>Quick Navigation Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through the active slide link.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused slide link.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused slide link.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves focus to the next slide link.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves focus to the previous slide link.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first slide link.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last slide link.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

6
pages/carousel/index.vue
View File

@ -18,7 +18,7 @@
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -45,7 +45,7 @@
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -72,7 +72,7 @@
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>

959
pages/cascadeselect/CascadeSelectDoc.vue
View File

File diff suppressed because it is too large Load Diff

12
pages/cascadeselect/index.vue
View File

@ -11,22 +11,22 @@
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="minwidth: 14rem" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="minwidth: 14rem" placeholder="Select a City">
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" />
<i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
<img v-if="slotProps.option.states" src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div>
</template>
</CascadeSelect>
<h5>Loading State</h5>
<CascadeSelect placeholder="Loading..." loading style="minwidth: 14rem"></CascadeSelect>
<CascadeSelect placeholder="Loading..." loading style="min-width: 14rem"></CascadeSelect>
</div>
</div>

35
pages/chart/Bar.vue
View File

@ -35,27 +35,11 @@
</template>
<script>
import BarChartDoc from './BarChartDoc';
import EventBus from '@/layouts/AppEventBus';
import BarChartDoc from './BarChartDoc';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.applyDarkTheme();
else this.applyLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
if (this.isDarkTheme()) {
this.applyDarkTheme();
} else {
this.applyLightTheme();
}
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
basicData: {
@ -119,6 +103,23 @@ export default {
stackedOptions: null
};
},
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.applyDarkTheme();
else this.applyLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
if (this.isDarkTheme()) {
this.applyDarkTheme();
} else {
this.applyLightTheme();
}
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;

4
pages/chart/BarChartDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
</ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
</template>
<script>

17
pages/chart/ChartDoc.vue
View File

@ -149,6 +149,12 @@ options: {
<td>150</td>
<td>Height of the chart in non-responsive mode.</td>
</tr>
<tr>
<td>canvasProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the CanvasHTMLAttributes to canvas element inside the component.</td>
</tr>
</tbody>
</table>
</div>
@ -231,5 +237,16 @@ options: {
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<p>
Chart components internally use <i>canvas</i> element, refer to the <a href="https://www.chartjs.org/docs/latest/general/accessibility.html">Chart.js accessibility</a> guide for more information. The canvas element can be customized with
<i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.
</p>
<pre v-code><code>
&lt;Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" /&gt;
</code></pre>
</div>
</template>

31
pages/chart/Combo.vue
View File

@ -19,25 +19,11 @@
</template>
<script>
import ComboChartDoc from './ComboChartDoc';
import EventBus from '@/layouts/AppEventBus';
import ComboChartDoc from './ComboChartDoc';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.applyDarkTheme();
else this.applyLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
chartData: {
@ -70,6 +56,21 @@ export default {
chartOptions: this.isDarkTheme() ? this.applyDarkTheme() : this.applyLightTheme()
};
},
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.applyDarkTheme();
else this.applyLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;

4
pages/chart/ComboChartDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
</ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
</template>
<script>

23
pages/chart/Doughnut.vue
View File

@ -19,21 +19,11 @@
</template>
<script>
import DoughnutChartDoc from './DoughnutChartDoc';
import EventBus from '@/layouts/AppEventBus';
import DoughnutChartDoc from './DoughnutChartDoc';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
chartData: {
@ -49,6 +39,17 @@ export default {
chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
};
},
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;

4
pages/chart/DoughnutChartDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
</ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
</template>
<script>

35
pages/chart/Line.vue
View File

@ -30,27 +30,11 @@
</template>
<script>
import LineChartDoc from './LineChartDoc';
import EventBus from '@/layouts/AppEventBus';
import LineChartDoc from './LineChartDoc';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.applyDarkTheme();
else this.applyLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
if (this.isDarkTheme()) {
this.applyDarkTheme();
} else {
this.applyLightTheme();
}
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
basicData: {
@ -125,6 +109,23 @@ export default {
multiAxisOptions: null
};
},
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.applyDarkTheme();
else this.applyLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
if (this.isDarkTheme()) {
this.applyDarkTheme();
} else {
this.applyLightTheme();
}
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;

4
pages/chart/LineChartDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
</ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
</template>
<script>

23
pages/chart/Pie.vue
View File

@ -19,21 +19,11 @@
</template>
<script>
import PieChartDoc from './PieChartDoc';
import EventBus from '@/layouts/AppEventBus';
import PieChartDoc from './PieChartDoc';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
chartData: {
@ -49,6 +39,17 @@ export default {
chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
};
},
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;

4
pages/chart/PieChartDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
</ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
</template>
<script>

23
pages/chart/PolarArea.vue
View File

@ -19,21 +19,11 @@
</template>
<script>
import PolarAreaChartDoc from './PolarAreaChartDoc';
import EventBus from '@/layouts/AppEventBus';
import PolarAreaChartDoc from './PolarAreaChartDoc';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
chartData: {
@ -49,6 +39,17 @@ export default {
chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
};
},
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;

4
pages/chart/PolarAreaChartDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
</ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
</template>
<script>

23
pages/chart/Radar.vue
View File

@ -19,21 +19,11 @@
</template>
<script>
import RadarChartDoc from './RadarChartDoc';
import EventBus from '@/layouts/AppEventBus';
import RadarChartDoc from './RadarChartDoc';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
chartData: {
@ -64,6 +54,17 @@ export default {
chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
};
},
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.chartOptions = this.getDarkTheme();
else this.chartOptions = this.getLightTheme();
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;

4
pages/chart/RadarChartDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
</ClientOnly>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
</template>
<script>

414
pages/checkbox/CheckboxDoc.vue
View File

@ -1,29 +1,28 @@
<template>
<ClientOnly>
<AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Checkbox from 'primevue/checkbox';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<pre v-code><code>
&lt;Checkbox v-model="checked" :binary="true" /&gt;
</code></pre>
<h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<pre v-code><code>
<h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<pre v-code><code>
&lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
&lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
&lt;Checkbox name="city" value="New York" v-model="cities" /&gt;
@ -31,7 +30,7 @@ import Checkbox from 'primevue/checkbox';
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
data() {
return {
@ -42,175 +41,187 @@ export default {
</code></pre>
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p>
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p>
<h5>Properties</h5>
<p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the checkbox.</td>
</tr>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value binding of the checkbox.</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>null</td>
<td>Name of the input element.</td>
</tr>
<tr>
<td>binary</td>
<td>boolean</td>
<td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td>
</tr>
<tr>
<td>trueValue</td>
<td>any</td>
<td>null</td>
<td>Value in checked state.</td>
</tr>
<tr>
<td>falseValue</td>
<td>any</td>
<td>null</td>
<td>Value in unchecked state.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that an input field is read-only.</td>
</tr>
<tr>
<td>required</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element is required.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<td>inputClass</td>
<td>any</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the checkbox.</td>
</tr>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value binding of the checkbox.</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>null</td>
<td>Name of the input element.</td>
</tr>
<tr>
<td>binary</td>
<td>boolean</td>
<td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td>
</tr>
<tr>
<td>trueValue</td>
<td>any</td>
<td>null</td>
<td>Value in checked state.</td>
</tr>
<tr>
<td>falseValue</td>
<td>any</td>
<td>null</td>
<td>Value in unchecked state.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that an input field is read-only.</td>
</tr>
<tr>
<td>required</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element is required.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<td>inputClass</td>
<td>any</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr>
<tr>
<td>aria-label</td>
<td>string</td>
<td>null</td>
<td>Defines a string value that labels an interactive element.</td>
</tr>
<tr>
<td>aria-labelledby</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke on value click.</td>
</tr>
<tr>
<td>change</td>
<td>event: Browser event</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke on value click.</td>
</tr>
<tr>
<td>change</td>
<td>event: Browser event</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-checkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-checkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-checkbox-icon</td>
<td>Icon element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-checkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-checkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-checkbox-icon</td>
<td>Icon element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
<i>aria-labelledby</i>, <i>aria-label</i> props.
</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
<i>aria-labelledby</i>, <i>aria-label</i> props.
</p>
<pre v-code><code>
<pre v-code><code>
&lt;label for="chkbox1"&gt;Remember Me&lt;/label&gt;
&lt;Checkbox inputId="chkbox1" /&gt;
@ -221,32 +232,31 @@ export default {
</code></pre>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the checkbox.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Toggles the checked state.</td>
</tr>
</tbody>
</table>
</div>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the checkbox.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Toggles the checked state.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

12
pages/checkbox/index.vue
View File

@ -12,31 +12,31 @@
<div class="card">
<h5>Basic</h5>
<div class="field-checkbox">
<Checkbox inputId="binary" v-model="checked" :binary="true" />
<Checkbox v-model="checked" inputId="binary" :binary="true" />
<label for="binary">Remember Me</label>
</div>
<h5>Multiple</h5>
<div class="field-checkbox">
<Checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
<Checkbox v-model="cities" inputId="city1" name="city" value="Chicago" />
<label for="city1">Chicago</label>
</div>
<div class="field-checkbox">
<Checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
<Checkbox v-model="cities" inputId="city2" name="city" value="Los Angeles" />
<label for="city2">Los Angeles</label>
</div>
<div class="field-checkbox">
<Checkbox inputId="city3" name="city" value="New York" v-model="cities" />
<Checkbox v-model="cities" inputId="city3" name="city" value="New York" />
<label for="city3">New York</label>
</div>
<div class="field-checkbox">
<Checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
<Checkbox v-model="cities" inputId="city4" name="city" value="San Francisco" />
<label for="city4">San Francisco</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="field-checkbox">
<Checkbox :inputId="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'" />
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" :disabled="category.key === 'R'" />
<label :for="category.key">{{ category.name }}</label>
</div>
</div>

261
pages/chip/ChipDoc.vue
View File

@ -1,146 +1,177 @@
<template>
<ClientOnly>
<AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Chip from 'primevue/chip';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/chip/chip.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Chip can display labels, icons and images.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Chip can display labels, icons and images.</p>
<pre v-code><code>
&lt;Chip label="Text Only" /&gt;
&lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
&lt;Chip label="Text with image" image="user.png" /&gt;
</code></pre>
<h5>Removable</h5>
<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p>
<pre v-code><code>
<h5>Removable</h5>
<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p>
<pre v-code><code>
&lt;Chip label="Text" removable /&gt;
</code></pre>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
&lt;Chip&gt;
Content
Content
&lt;/Chip&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>removable</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display a remove icon.</td>
</tr>
<tr>
<td>removeIconClass</td>
<td>string</td>
<td>pi pi-times-circle</td>
<td>Icon of the remove element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>removable</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display a remove icon.</td>
</tr>
<tr>
<td>removeIcon</td>
<td>string</td>
<td>pi pi-times-circle</td>
<td>Icon of the remove element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>remove</td>
<td>event: Browser event</td>
<td>Callback to invoke when a chip is removed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>remove</td>
<td>event: Browser event</td>
<td>Callback to invoke when a chip is removed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chip</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-chip-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-chip-text</td>
<td>Text of the chip.</td>
</tr>
<tr>
<td>p-chip-remove-icon</td>
<td>Remove icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chip</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-chip-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-chip-text</td>
<td>Text of the chip.</td>
</tr>
<tr>
<td>p-chip-remove-icon</td>
<td>Remove icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a
<i>tabindex</i> and focusable with the tab key.
</p>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>backspace</i>
</td>
<td>Hides removable.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Hides removable.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

12
pages/chip/index.vue
View File

@ -28,18 +28,18 @@
<h5>Image</h5>
<div class="flex align-items-center">
<Chip label="Amy Elsner" image="/demo/images/avatar/amyelsner.png" class="mr-2" />
<Chip label="Asiya Javayant" image="/demo/images/avatar/asiyajavayant.png" class="mr-2" />
<Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2" />
<Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" removable />
<Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="mr-2" />
<Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="mr-2" />
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" />
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
</div>
<h5>Styling</h5>
<div class="flex align-items-center">
<Chip label="Action" class="mr-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
<Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
</div>
</div>
</div>

507
pages/chips/ChipsDoc.vue
View File

@ -1,29 +1,28 @@
<template>
<ClientOnly>
<AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Chips from 'primevue/chips';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/chips/chips.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>An array as the value can be bound using the standard v-model directive.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>An array as the value can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;Chips v-model="value" /&gt;
</code></pre>
<h5>Custom Content</h5>
<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
<pre v-code><code><template v-pre>
<h5>Custom Content</h5>
<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
<pre v-code><code><template v-pre>
&lt;Chips v-model="value"&gt;
&lt;template #chip="slotProps"&gt;
&lt;div&gt;
@ -35,182 +34,188 @@ import Chips from 'primevue/chips';
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>array</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
<tr>
<td>separator</td>
<td>string</td>
<td>null</td>
<td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
</tr>
<tr>
<td>addOnBlur</td>
<td>boolean</td>
<td>false</td>
<td>Whether to add an item when the input loses focus.</td>
</tr>
<tr>
<td>allowDuplicate</td>
<td>boolean</td>
<td>true</td>
<td>Whether to allow duplicate values or not.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Placeholder text for the input.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Style class of the component input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>array</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
<tr>
<td>separator</td>
<td>string</td>
<td>null</td>
<td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
</tr>
<tr>
<td>addOnBlur</td>
<td>boolean</td>
<td>false</td>
<td>Whether to add an item when the input loses focus.</td>
</tr>
<tr>
<td>allowDuplicate</td>
<td>boolean</td>
<td>true</td>
<td>Whether to allow duplicate values or not.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Placeholder text for the input.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Style class of the component input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr>
<tr>
<td>removeTokenIcon</td>
<td>string</td>
<td>pi pi-times-circle</td>
<td>Icon to display in chip remove action.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>add</td>
<td>
originalEvent: Browser event <br />
value: Added item value
</td>
<td>Callback to invoke when a chip is added.</td>
</tr>
<tr>
<td>remove</td>
<td>
originalEvent: Browser event <br />
value: Removed item value
</td>
<td>Callback to invoke when a chip is removed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>add</td>
<td>
originalEvent: Browser event <br />
value: Added item value
</td>
<td>Callback to invoke when a chip is added.</td>
</tr>
<tr>
<td>remove</td>
<td>
originalEvent: Browser event <br />
value: Removed item value
</td>
<td>Callback to invoke when a chip is removed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>chip</td>
<td>value: Value of the component</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>chip</td>
<td>value: Value of the component</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chips</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chips-token</td>
<td>Chip element container.</td>
</tr>
<tr>
<td>p-chips-token-icon</td>
<td>Icon of a chip.</td>
</tr>
<tr>
<td>p-chips-token-label</td>
<td>label of a chip.</td>
</tr>
<tr>
<td>p-chips-input-token</td>
<td>Container of input element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chips</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chips-token</td>
<td>Chip element container.</td>
</tr>
<tr>
<td>p-chips-token-icon</td>
<td>Icon of a chip.</td>
</tr>
<tr>
<td>p-chips-token-label</td>
<td>label of a chip.</td>
</tr>
<tr>
<td>p-chips-input-token</td>
<td>Container of input element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with
<i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to
horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
</p>
<pre v-code><code>
<pre v-code><code>
&lt;label for="chips1"&gt;Tags&lt;/label&gt;
&lt;Chips inputId="chips1" /&gt;
@ -221,66 +226,65 @@ import Chips from 'primevue/chips';
</code></pre>
<h6>Input Field Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the input element</td>
</tr>
<tr>
<td><i>enter</i></td>
<td>Adds a new chips using the input field value.</td>
</tr>
<tr>
<td><i>backspace</i></td>
<td>Deletes the previous chip if the input field is empty.</td>
</tr>
<tr>
<td><i>left arrow</i></td>
<td>Moves focus to the previous chip if available and input field is empty.</td>
</tr>
</tbody>
</table>
</div>
<h6>Input Field Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the input element</td>
</tr>
<tr>
<td><i>enter</i></td>
<td>Adds a new chips using the input field value.</td>
</tr>
<tr>
<td><i>backspace</i></td>
<td>Deletes the previous chip if the input field is empty.</td>
</tr>
<tr>
<td><i>left arrow</i></td>
<td>Moves focus to the previous chip if available and input field is empty.</td>
</tr>
</tbody>
</table>
</div>
<h6>Chip Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>left arrow</i></td>
<td>Moves focus to the previous chip if available.</td>
</tr>
<tr>
<td><i>right arrow</i></td>
<td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
</tr>
<tr>
<td><i>backspace</i></td>
<td>Deletes the chips and adds focus to the input field.</td>
</tr>
</tbody>
</table>
</div>
<h6>Chip Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>left arrow</i></td>
<td>Moves focus to the previous chip if available.</td>
</tr>
<tr>
<td><i>right arrow</i></td>
<td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
</tr>
<tr>
<td><i>backspace</i></td>
<td>Deletes the chips and adds focus to the input field.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -300,8 +304,11 @@ export default {
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>RegExp Separator</h5>
<Chips v-model="value3" :separator="separatorExp" />
<h5>Template</h5>
<Chips v-model="value3">
<Chips v-model="value4">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
@ -319,7 +326,9 @@ export default {
return {
value1: null,
value2: null,
value3: null
value3: null,
value4: null,
separatorExp:/,| /
}
}
}
@ -338,8 +347,11 @@ export default {
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>RegExp Separator</h5>
<Chips v-model="value3" :separator="separatorExp" />
<h5>Template</h5>
<Chips v-model="value3">
<Chips v-model="value4">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
@ -359,6 +371,8 @@ export default {
const value1 = ref();
const value2 = ref();
const value3 = ref();
const value4 = ref();
const separatorExp = ref(/,| /);
return { value1, value2, value3 }
}
@ -379,6 +393,9 @@ export default {
<h5>Comma Separator</h5>
<p-chips v-model="value2" separator=","></p-chips>
<h5>RegExp Separator</h5>
<p-chips v-model="value3" :separator="separatorExp" />
<h5>Template</h5>
<p-chips v-model="value3">
<template #chip="slotProps">
@ -400,6 +417,8 @@ export default {
const value1 = ref();
const value2 = ref();
const value3 = ref();
const value4 = ref();
const separatorExp = ref(/,| /);
return { value1, value2, value3 }
},

9
pages/chips/index.vue
View File

@ -16,8 +16,11 @@
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>RegExp Separator</h5>
<Chips v-model="value3" :separator="separatorExp" />
<h5>Template</h5>
<Chips v-model="value3">
<Chips v-model="value4">
<template #chip="slotProps">
<div>
<span>{{ slotProps.value }} - (active) </span>
@ -40,7 +43,9 @@ export default {
return {
value1: null,
value2: null,
value3: null
value3: null,
value4: null,
separatorExp: /,| /
};
},
components: {

538
pages/colorpicker/ColorPickerDoc.vue
View File

@ -1,27 +1,26 @@
<template>
<ClientOnly>
<AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import ColorPicker from 'primevue/colorpicker';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<pre v-code><code>
&lt;ColorPicker v-model="color" /&gt;
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
data() {
return {
@ -32,278 +31,277 @@ export default {
</code></pre>
<h5>Inline and Overlay</h5>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<pre v-code><code>
<h5>Inline and Overlay</h5>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<pre v-code><code>
&lt;ColorPicker v-model="color" :inline="true" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>defaultColor</td>
<td>string</td>
<td>ff0000</td>
<td>Initial color to display when value is not defined.</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display as an overlay or not.</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>hex</td>
<td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>tabindex</td>
<td>string</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>panelClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>defaultColor</td>
<td>string</td>
<td>ff0000</td>
<td>Initial color to display when value is not defined.</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display as an overlay or not.</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>hex</td>
<td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>tabindex</td>
<td>string</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>panelClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>
event.originalEvent: Browser event <br />
event.value: Selected color
</td>
<td>Callback to invoke when a color is selected.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when popup is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when popup is hidden.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>
event.originalEvent: Browser event <br />
event.value: Selected color
</td>
<td>Callback to invoke when a color is selected.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when popup is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when popup is hidden.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-colorpicker</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-colorpicker-overlay</td>
<td>Container element in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-preview</td>
<td>Preview input in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-panel</td>
<td>Panel element of the colorpicker.</td>
</tr>
<tr>
<td>p-colorpicker-content</td>
<td>Wrapper that contains color and hue sections.</td>
</tr>
<tr>
<td>p-colorpicker-color-selector</td>
<td>Color selector container.</td>
</tr>
<tr>
<td>p-colorpicker-color</td>
<td>Color element.</td>
</tr>
<tr>
<td>p-colorpicker-color-handle</td>
<td>Handle of the color element.</td>
</tr>
<tr>
<td>p-colorpicker-hue</td>
<td>Hue slider.</td>
</tr>
<tr>
<td>p-colorpicker-hue-handle</td>
<td>Handle of the hue slider.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-colorpicker</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-colorpicker-overlay</td>
<td>Container element in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-preview</td>
<td>Preview input in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-panel</td>
<td>Panel element of the colorpicker.</td>
</tr>
<tr>
<td>p-colorpicker-content</td>
<td>Wrapper that contains color and hue sections.</td>
</tr>
<tr>
<td>p-colorpicker-color-selector</td>
<td>Color selector container.</td>
</tr>
<tr>
<td>p-colorpicker-color</td>
<td>Color element.</td>
</tr>
<tr>
<td>p-colorpicker-color-handle</td>
<td>Handle of the color element.</td>
</tr>
<tr>
<td>p-colorpicker-hue</td>
<td>Hue slider.</td>
</tr>
<tr>
<td>p-colorpicker-hue-handle</td>
<td>Handle of the hue slider.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen
readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
</p>
<h6>Closed State Keyboard Support of Popup ColorPicker</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the color picker button.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Opens the popup and moves focus to the color slider.</td>
</tr>
</tbody>
</table>
</div>
<h6>Closed State Keyboard Support of Popup ColorPicker</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the color picker button.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Opens the popup and moves focus to the color slider.</td>
</tr>
</tbody>
</table>
</div>
<h6>Popup Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>enter</i></td>
<td>Selects the color and closes the popup.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Selects the color and closes the popup.</td>
</tr>
<tr>
<td><i>escape</i></td>
<td>Closes the popup, moves focus to the input.</td>
</tr>
</tbody>
</table>
</div>
<h6>Popup Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>enter</i></td>
<td>Selects the color and closes the popup.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Selects the color and closes the popup.</td>
</tr>
<tr>
<td><i>escape</i></td>
<td>Closes the popup, moves focus to the input.</td>
</tr>
</tbody>
</table>
</div>
<h6>Color Picker Slider</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>arrow keys</i></td>
<td>Changes color.</td>
</tr>
</tbody>
</table>
</div>
<h6>Color Picker Slider</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>arrow keys</i></td>
<td>Changes color.</td>
</tr>
</tbody>
</table>
</div>
<h6>Hue Slider</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="inline-flex flex-column">
<i class="mb-1">up arrow</i>
<i>down arrow</i>
</span>
</td>
<td>Changes hue.</td>
</tr>
</tbody>
</table>
</div>
<h6>Hue Slider</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="inline-flex flex-column">
<i class="mb-1">up arrow</i>
<i>down arrow</i>
</span>
</td>
<td>Changes hue.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

2
pages/colorpicker/index.vue
View File

@ -22,7 +22,7 @@
<div class="flex flex-column align-items-center md:flex-row md:align-items-start">
<ColorPicker v-model="color3" :inline="true" />
<div :style="wallStyle" class="mt-5 md:mt-0 md:ml-5 inline-flex">
<img alt="room" src="/demo/images/interior.png" class="w-full md:auto" />
<img alt="room" src="demo/images/interior.png" class="w-full md:auto" />
</div>
</div>
</div>

589
pages/confirmdialog/ConfirmDialogDoc.vue
View File

@ -1,9 +1,8 @@
<template>
<ClientOnly>
<AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
<h5>ConfirmationService</h5>
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<pre v-code.script><code>
<AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
<h5>ConfirmationService</h5>
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<pre v-code.script><code>
import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';
@ -12,32 +11,32 @@ app.use(ConfirmationService);
</code></pre>
<h5>Import via Module</h5>
<pre v-code.script><code>
<h5>Import via Module</h5>
<pre v-code.script><code>
import ConfirmDialog from 'primevue/confirmdialog';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>
ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared
by any component within the application.
</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>
ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared by
any component within the application.
</p>
<pre v-code><code>
&lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
&lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
methods: {
delete() {
@ -50,6 +49,12 @@ export default {
},
reject: () => {
//callback to execute when user rejects the action
},
onShow: () => {
//callback to execute when dialog is shown
},
onHide: () => {
//callback to execute when dialog is hidden
}
});
},
@ -58,9 +63,9 @@ export default {
</code></pre>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code>
import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm";
@ -76,6 +81,12 @@ export default defineComponent({
},
reject: () => {
//callback to execute when user rejects the action
},
onShow: () => {
//callback to execute when dialog is shown
},
onHide: () => {
//callback to execute when dialog is hidden
}
});
}
@ -83,9 +94,9 @@ export default defineComponent({
</code></pre>
<h5>Close Confirmation</h5>
<p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code>
<h5>Close Confirmation</h5>
<p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code>
export default {
methods: {
discard() {
@ -96,9 +107,9 @@ export default {
</code></pre>
<h5>Templating</h5>
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
<pre v-code><code><template v-pre>
<h5>Templating</h5>
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
<pre v-code><code><template v-pre>
&lt;ConfirmPopup group="demo">
&lt;template #message="slotProps"&gt;
&lt;div class="flex p-4"&gt;
@ -107,222 +118,338 @@ export default {
&lt;/div&gt;
&lt;/template&gt;
&lt;/ConfirmPopup&gt;
</template>
</code></pre>
<h5>Responsive</h5>
<p>
ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
<i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
</p>
<pre v-code><code>
<h5>Responsive</h5>
<p>
ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
<i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
</p>
<pre v-code><code>
&lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt;
</code></pre>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Header text of the dialog.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
<tr>
<td>blockScroll</td>
<td>boolean</td>
<td>true</td>
<td>Whether background scroll should be blocked when dialog is visible.</td>
</tr>
<tr>
<td>defaultFocus</td>
<td>string</td>
<td>accept</td>
<td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
</tr>
</tbody>
</table>
</div>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Header text of the dialog.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>onShow</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when dialog is shown.</td>
</tr>
<tr>
<td>onHide</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when dialog is hidden.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
<tr>
<td>blockScroll</td>
<td>boolean</td>
<td>true</td>
<td>Whether background scroll should be blocked when dialog is visible.</td>
</tr>
<tr>
<td>defaultFocus</td>
<td>string</td>
<td>accept</td>
<td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
</tr>
</tbody>
</table>
</div>
<h5>ConfirmationService</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>require</td>
<td>confirm: Confirmation Object</td>
<td>Displays the dialog using the confirmation object options.</td>
</tr>
<tr>
<td>close</td>
<td>-</td>
<td>Hides the dialog without invoking accept or reject callbacks.</td>
</tr>
</tbody>
</table>
</div>
<h5>ConfirmationService</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>require</td>
<td>confirm: Confirmation Object</td>
<td>Displays the dialog using the confirmation object options.</td>
</tr>
<tr>
<td>close</td>
<td>-</td>
<td>Hides the dialog without invoking accept or reject callbacks.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <nuxt-link to="/dialog">dialog</nuxt-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-dialog</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-dialog</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-confirm-dialog-message</td>
<td>Container of message.</td>
</tr>
<tr>
<td>p-confirm-dialog-icon</td>
<td>Icon container inside content.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup.
</p>
<p>
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
trigger and the dialog is defined.
</p>
<pre v-code><code>
&lt;ConfirmDialog id="confirm" /&gt;
&lt;Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"&gt;&lt;/Button&gt;
</code></pre>
<pre v-code.script><code>
setup() {
const confirm = useConfirm();
const isVisible = ref(false);
const openDialog = () => {
confirm.require({
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
onShow: () => {
isVisible.value = true;
},
onHide: () => {
isVisible.value = false;
}
});
};
return { isVisible, openDialog};
}
</code></pre>
<h6>Overlay Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the next the focusable element within the dialog.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element within the dialog.</td>
</tr>
<tr>
<td>
<i>escape</i>
</td>
<td>Closes the dialog.</td>
</tr>
</tbody>
</table>
</div>
<h6>Buttons Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>enter</i>
</td>
<td>Closes the dialog.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Closes the dialog.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -677,10 +804,10 @@ export default defineComponent({
acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times',
accept: () => {
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: () => {
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}

548
pages/confirmpopup/ConfirmPopupDoc.vue
View File

@ -1,9 +1,8 @@
<template>
<ClientOnly>
<AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
<h5>ConfirmationService</h5>
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<pre v-code.script><code>
<AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
<h5>ConfirmationService</h5>
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<pre v-code.script><code>
import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';
@ -12,29 +11,29 @@ app.use(ConfirmationService);
</code></pre>
<h5>Import via Module</h5>
<pre v-code.script><code>
<h5>Import via Module</h5>
<pre v-code.script><code>
import ConfirmPopup from 'primevue/confirmpopup';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
<pre v-code><code>
&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
&lt;Button @click="delete($event)" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
methods: {
delete(event) {
@ -47,6 +46,12 @@ export default {
},
reject: () => {
//callback to execute when user rejects the action
},
onShow: () => {
//callback to execute when popup is shown
},
onHide: () => {
//callback to execute when popup is hidden
}
});
},
@ -55,9 +60,9 @@ export default {
</code></pre>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code>
import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm";
@ -74,6 +79,12 @@ export default defineComponent({
},
reject: () => {
//callback to execute when user rejects the action
},
onShow: () => {
//callback to execute when popup is shown
},
onHide: () => {
//callback to execute when popup is hidden
}
});
}
@ -84,9 +95,9 @@ export default defineComponent({
</code></pre>
<h5>Close Confirmation</h5>
<p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code>
<h5>Close Confirmation</h5>
<p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code>
export default {
methods: {
discard() {
@ -97,9 +108,9 @@ export default {
</code></pre>
<h5>Templating</h5>
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
<pre v-code><code><template v-pre>
<h5>Templating</h5>
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
<pre v-code><code><template v-pre>
&lt;ConfirmPopup group="demo">
&lt;template #message="slotProps"&gt;
&lt;div class="flex p-4"&gt;
@ -112,200 +123,315 @@ export default {
</template>
</code></pre>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>DomElement</td>
<td>null</td>
<td>Element to align the overlay.</td>
</tr>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
</tbody>
</table>
</div>
<h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>DomElement</td>
<td>null</td>
<td>Element to align the overlay.</td>
</tr>
<tr>
<td>message</td>
<td>string</td>
<td>null</td>
<td>Message of the confirmation.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon to display next to the message.</td>
</tr>
<tr>
<td>accept</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is confirmed.</td>
</tr>
<tr>
<td>reject</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when action is rejected.</td>
</tr>
<tr>
<td>onShow</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when popup is shown.</td>
</tr>
<tr>
<td>onHide</td>
<td>Function</td>
<td>null</td>
<td>Callback to execute when popup is hidden.</td>
</tr>
<tr>
<td>acceptLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>rejectLabel</td>
<td>string</td>
<td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>acceptIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the accept button.</td>
</tr>
<tr>
<td>rejectIcon</td>
<td>string</td>
<td>null</td>
<td>Icon of the reject button.</td>
</tr>
<tr>
<td>acceptClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the accept button.</td>
</tr>
<tr>
<td>rejectClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the reject button.</td>
</tr>
<tr>
<td>defaultFocus</td>
<td>string</td>
<td>accept</td>
<td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
</tr>
</tbody>
</table>
</div>
<h5>ConfirmationService</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>require</td>
<td>confirm: Confirmation Object</td>
<td>Displays the dialog using the confirmation object options.</td>
</tr>
<tr>
<td>close</td>
<td>-</td>
<td>Hides the dialog without invoking accept or reject callbacks.</td>
</tr>
</tbody>
</table>
</div>
<h5>ConfirmationService</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>require</td>
<td>confirm: Confirmation Object</td>
<td>Displays the dialog using the confirmation object options.</td>
</tr>
<tr>
<td>close</td>
<td>-</td>
<td>Hides the dialog without invoking accept or reject callbacks.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <nuxt-link to="/dialog">dialog</nuxt-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-popup</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-confirm-popup-content</td>
<td>Content element.</td>
</tr>
<tr>
<td>p-confirm-popup-icon</td>
<td>Message icon.</td>
</tr>
<tr>
<td>p-confirm-popup-message</td>
<td>Message text.</td>
</tr>
<tr>
<td>p-confirm-popup-footer</td>
<td>Footer element for buttons.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-popup</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-confirm-popup-content</td>
<td>Content element.</td>
</tr>
<tr>
<td>p-confirm-popup-icon</td>
<td>Message icon.</td>
</tr>
<tr>
<td>p-confirm-popup-message</td>
<td>Message text.</td>
</tr>
<tr>
<td>p-confirm-popup-footer</td>
<td>Footer element for buttons.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
<i>aria-modal</i> is added since focus is kept within the popup.
</p>
<p>
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
trigger and the dialog is defined.
</p>
<pre v-code><code>
&lt;ConfirmPopup id="confirm" aria-label="popup" /&gt;
&lt;Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" /&gt;
</code></pre>
<pre v-code.script><code>
setup() {
const confirm = useConfirm();
const isVisible = ref(false);
const openPopup = (event) => {
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
onShow: () => {
isVisible.value = true;
},
onHide: () => {
isVisible.value = false;
}
});
}
return {isVisible, openPopup};
}
</code></pre>
<h6>Overlay Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the next the focusable element within the popup.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element within the popup.</td>
</tr>
<tr>
<td>
<i>escape</i>
</td>
<td>Closes the popup and moves focus to the trigger.</td>
</tr>
</tbody>
</table>
</div>
<h6>Buttons Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>enter</i>
</td>
<td>Triggers the action, closes the popup and moves focus to the trigger.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Triggers the action, closes the popup and moves focus to the trigger.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

1343
pages/contextmenu/ContextMenuDoc.vue
View File

File diff suppressed because it is too large Load Diff

2
pages/contextmenu/index.vue
View File

@ -13,7 +13,7 @@
<div class="content-section implementation">
<div class="card">
<img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
</div>
</div>

2
pages/datatable/Basic.vue
View File

@ -24,7 +24,7 @@
</template>
<script>
import ProductService from '@/service/ProductService';
import ProductService from '../../service/ProductService';
import DataTableBasicDoc from './DataTableBasicDoc';
export default {

108
pages/datatable/ColGroup.vue
View File

@ -1,63 +1,61 @@
<template>
<div>
<ClientOnly>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable <span>ColumnGroup</span></h1>
<p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.</p>
</div>
<AppDemoActions />
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable <span>ColumnGroup</span></h1>
<p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="sales" responsiveLayout="scroll">
<ColumnGroup type="header">
<Row>
<Column header="Product" :rowspan="3" />
<Column header="Sale Rate" :colspan="4" />
</Row>
<Row>
<Column header="Sales" :colspan="2" />
<Column header="Profits" :colspan="2" />
</Row>
<Row>
<Column header="Last Year" :sortable="true" field="lastYearSale" />
<Column header="This Year" :sortable="true" field="thisYearSale" />
<Column header="Last Year" :sortable="true" field="lastYearProfit" />
<Column header="This Year" :sortable="true" field="thisYearProfit" />
</Row>
</ColumnGroup>
<Column field="product" />
<Column field="lastYearSale">
<template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
</Column>
<Column field="thisYearSale">
<template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
</Column>
<Column field="lastYearProfit">
<template #body="slotProps">
{{ formatCurrency(slotProps.data.lastYearProfit) }}
</template>
</Column>
<Column field="thisYearProfit">
<template #body="slotProps">
{{ formatCurrency(slotProps.data.thisYearProfit) }}
</template>
</Column>
<ColumnGroup type="footer">
<Row>
<Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
<Column :footer="lastYearTotal" />
<Column :footer="thisYearTotal" />
</Row>
</ColumnGroup>
</DataTable>
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="sales" responsiveLayout="scroll">
<ColumnGroup type="header">
<Row>
<Column header="Product" :rowspan="3" />
<Column header="Sale Rate" :colspan="4" />
</Row>
<Row>
<Column header="Sales" :colspan="2" />
<Column header="Profits" :colspan="2" />
</Row>
<Row>
<Column header="Last Year" :sortable="true" field="lastYearSale" />
<Column header="This Year" :sortable="true" field="thisYearSale" />
<Column header="Last Year" :sortable="true" field="lastYearProfit" />
<Column header="This Year" :sortable="true" field="thisYearProfit" />
</Row>
</ColumnGroup>
<Column field="product" />
<Column field="lastYearSale">
<template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
</Column>
<Column field="thisYearSale">
<template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
</Column>
<Column field="lastYearProfit">
<template #body="slotProps">
{{ formatCurrency(slotProps.data.lastYearProfit) }}
</template>
</Column>
<Column field="thisYearProfit">
<template #body="slotProps">
{{ formatCurrency(slotProps.data.thisYearProfit) }}
</template>
</Column>
<ColumnGroup type="footer">
<Row>
<Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
<Column :footer="lastYearTotal" />
<Column :footer="thisYearTotal" />
</Row>
</ColumnGroup>
</DataTable>
</div>
</div>
<AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
</div>
</template>
@ -401,6 +399,7 @@ export default {
computed: {
lastYearTotal() {
let total = 0;
for (let sale of this.sales) {
total += sale.lastYearProfit;
}
@ -409,6 +408,7 @@ export default {
},
thisYearTotal() {
let total = 0;
for (let sale of this.sales) {
total += sale.thisYearProfit;
}

4
pages/datatable/ColResize.vue
View File

@ -33,9 +33,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
</div>
</template>

6
pages/datatable/ColToggle.vue
View File

@ -17,14 +17,12 @@
</div>
</template>
<Column field="code" header="Code" />
<Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
<Column v-for="(col, index) of selectedColumns" :key="col.field + '_' + index" :field="col.field" :header="col.header"></Column>
</DataTable>
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
</div>
</template>

8
pages/datatable/ContextMenu.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu" responsiveLayout="scroll">
<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
@ -22,12 +22,10 @@
</DataTable>
</div>
<ContextMenu :model="menuModel" ref="cm" />
<ContextMenu ref="cm" :model="menuModel" />
</div>
<ClientOnly>
<AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
</div>
</template>

24
pages/datatable/Crud.vue
View File

@ -24,8 +24,8 @@
<DataTable
ref="dt"
:value="products"
v-model:selection="selectedProducts"
:value="products"
dataKey="id"
:paginator="true"
:rows="10"
@ -50,7 +50,7 @@
<Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true" style="min-width: 8rem">
@ -79,11 +79,11 @@
</div>
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
<img :src="'/demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
<img v-if="product.image" :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" />
<div class="field">
<label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small>
<small v-if="submitted && !product.name" class="p-error">Name is required.</small>
</div>
<div class="field">
<label for="description">Description</label>
@ -111,19 +111,19 @@
<label class="mb-3">Category</label>
<div class="formgrid grid">
<div class="field-radiobutton col-6">
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
<RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
<label for="category1">Accessories</label>
</div>
<div class="field-radiobutton col-6">
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
<RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
<label for="category2">Clothing</label>
</div>
<div class="field-radiobutton col-6">
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
<RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
<label for="category3">Electronics</label>
</div>
<div class="field-radiobutton col-6">
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
<RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
<label for="category4">Fitness</label>
</div>
</div>
@ -171,9 +171,7 @@
</Dialog>
</div>
<ClientOnly>
<AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
</div>
</template>
@ -1186,6 +1184,7 @@ export default {
methods: {
formatCurrency(value) {
if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
return;
},
openNew() {
@ -1234,6 +1233,7 @@ export default {
},
findIndexById(id) {
let index = -1;
for (let i = 0; i < this.products.length; i++) {
if (this.products[i].id === id) {
index = i;
@ -1246,9 +1246,11 @@ export default {
createId() {
let id = '';
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 5; i++) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
},
exportCSV() {

4
pages/datatable/DataTableBasicDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<ClientOnly>
<AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
</template>
<script>

3201
pages/datatable/DataTableDoc.vue
View File

File diff suppressed because it is too large Load Diff

6
pages/datatable/DynamicColumns.vue
View File

@ -11,14 +11,12 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="products" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
</DataTable>
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
</div>
</template>

30
pages/datatable/Edit.vue
View File

@ -13,7 +13,7 @@
<h5>Cell Editing</h5>
<p>Validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products1" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width: 25%">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
@ -23,7 +23,7 @@
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="products2" editMode="row" dataKey="id" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
<DataTable v-model:editingRows="editingRows" :value="products2" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
@ -57,10 +57,10 @@
<div class="card">
<h5>Cell Editing with Sorting and Filter</h5>
<DataTable :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" v-model:filters="filters" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width: 25%" sortable filter>
<DataTable v-model:filters="filters" :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" responsiveLayout="scroll">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" v-tooltip.top.focus="'Hit enter key to filter'" />
<InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
</template>
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
@ -70,15 +70,13 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
</div>
</template>
<script>
import ProductService from '../../service/ProductService';
import { FilterMatchMode } from 'primevue/api';
import ProductService from '../../service/ProductService';
export default {
data() {
@ -628,6 +626,11 @@ export default {
{ field: 'price', header: 'Price' }
];
},
mounted() {
this.productService.getProductsSmall().then((data) => (this.products1 = data));
this.productService.getProductsSmall().then((data) => (this.products2 = data));
this.productService.getProductsSmall().then((data) => (this.products3 = data));
},
methods: {
onCellEditComplete(event) {
let { data, newValue, field } = event;
@ -647,12 +650,16 @@ export default {
},
isPositiveInteger(val) {
let str = String(val);
str = str.trim();
if (!str) {
return false;
}
str = str.replace(/^0+/, '') || '0';
var n = Math.floor(Number(str));
return n !== Infinity && String(n) === str && n >= 0;
},
onRowEditSave(event) {
@ -675,11 +682,6 @@ export default {
return 'NA';
}
}
},
mounted() {
this.productService.getProductsSmall().then((data) => (this.products1 = data));
this.productService.getProductsSmall().then((data) => (this.products2 = data));
this.productService.getProductsSmall().then((data) => (this.products3 = data));
}
};
</script>

6
pages/datatable/Export.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="products" ref="dt" responsiveLayout="scroll">
<DataTable ref="dt" :value="products" responsiveLayout="scroll">
<template #header>
<div style="text-align: left">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
@ -24,9 +24,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
</div>
</template>

38
pages/datatable/Filter.vue
View File

@ -13,13 +13,13 @@
<h5>Filter Menu</h5>
<p>Filters are displayed in an overlay.</p>
<DataTable
v-model:filters="filters1"
:value="customers1"
:paginator="true"
class="p-datatable-customers"
showGridlines
:rows="10"
dataKey="id"
v-model:filters="filters1"
filterDisplay="menu"
:loading="loading1"
responsiveLayout="scroll"
@ -41,7 +41,7 @@
{{ data.name }}
</template>
<template #filter="{ filterModel }">
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name" />
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
</template>
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
@ -50,7 +50,7 @@
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country" />
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
</template>
<template #filterclear="{ filterCallback }">
<Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
@ -64,7 +64,7 @@
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span>
</template>
<template #filter="{ filterModel }">
@ -72,7 +72,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@ -102,7 +102,7 @@
<template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
<template #value="slotProps">
<span :class="'customer-badge status-' + slotProps.value" v-if="slotProps.value">{{ slotProps.value }}</span>
<span v-if="slotProps.value" :class="'customer-badge status-' + slotProps.value">{{ slotProps.value }}</span>
<span v-else>{{ slotProps.placeholder }}</span>
</template>
<template #option="slotProps">
@ -117,7 +117,7 @@
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex align-items-center justify-content-center px-2">
<div class="flex align-items-center justify-content-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div>
@ -138,12 +138,12 @@
<h5>Filter Row</h5>
<p>Filters are displayed inline within a separate row.</p>
<DataTable
v-model:filters="filters2"
:value="customers2"
:paginator="true"
class="p-datatable-customers"
:rows="10"
dataKey="id"
v-model:filters="filters2"
filterDisplay="row"
:loading="loading2"
responsiveLayout="scroll"
@ -164,7 +164,7 @@
{{ data.name }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'" />
<InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" />
</template>
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
@ -173,19 +173,19 @@
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" v-tooltip.top.focus="'Filter as you type'" />
<InputText v-model="filterModel.value" v-tooltip.top.focus="'Filter as you type'" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" />
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span>
</template>
<template #filter="{ filterModel, filterCallback }">
<MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@ -199,7 +199,7 @@
<template #filter="{ filterModel, filterCallback }">
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
<template #value="slotProps">
<span :class="'customer-badge status-' + slotProps.value" v-if="slotProps.value">{{ slotProps.value }}</span>
<span v-if="slotProps.value" :class="'customer-badge status-' + slotProps.value">{{ slotProps.value }}</span>
<span v-else>{{ slotProps.placeholder }}</span>
</template>
<template #option="slotProps">
@ -220,15 +220,13 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
</div>
</template>
<script>
import CustomerService from '../../service/CustomerService';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '../../service/CustomerService';
export default {
data() {
@ -367,7 +365,7 @@ export default {
</template>
<template #filter={filterModel}>
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex align-items-center justify-content-center px-2">
<div class="flex align-items-center justify-content-between px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div>
@ -708,7 +706,7 @@ export default {
</template>
<template #filter={filterModel}>
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex align-items-center justify-content-center px-2">
<div class="flex align-items-center justify-content-between px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div>
@ -1063,7 +1061,7 @@ export default {
</template>
<template #filter={filterModel}>
<p-slider v-model="filterModel.value" range class="m-3"></p-slider>
<div class="flex align-items-center justify-content-center px-2">
<div class="flex align-items-center justify-content-between px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div>

4
pages/datatable/FlexScroll.vue
View File

@ -17,9 +17,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />
</div>
</template>

4
pages/datatable/GridLines.vue
View File

@ -21,9 +21,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
</div>
</template>

26
pages/datatable/Lazy.vue
View File

@ -16,12 +16,13 @@
<div class="content-section implementation">
<div class="card">
<DataTable
ref="dt"
v-model:filters="filters"
v-model:selection="selectedCustomers"
:value="customers"
:lazy="true"
:paginator="true"
:rows="10"
v-model:filters="filters"
ref="dt"
dataKey="id"
:totalRecords="totalRecords"
:loading="loading"
@ -31,40 +32,37 @@
filterDisplay="row"
:globalFilterFields="['name', 'country.name', 'company', 'representative.name']"
responsiveLayout="scroll"
v-model:selection="selectedCustomers"
:selectAll="selectAll"
@select-all-change="onSelectAllChange"
@row-select="onRowSelect"
@row-unselect="onRowUnselect"
>
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
<Column ref="name" field="name" header="Name" filterMatchMode="startsWith" :sortable="true">
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name" />
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name" />
</template>
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
<Column ref="country.name" field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" :sortable="true">
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country" />
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country" />
</template>
</Column>
<Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true">
<Column ref="company" field="company" header="Company" filterMatchMode="contains" :sortable="true">
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by company" />
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by company" />
</template>
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true">
<Column ref="representative.name" field="representative.name" header="Representative" filterField="representative.name" :sortable="true">
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by representative" />
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by representative" />
</template>
</Column>
</DataTable>
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
</div>
</template>

180
pages/datatable/Paginator.vue
View File

@ -1,41 +1,70 @@
<template>
<ClientOnly>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable <span>Paginator</span></h1>
<p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
</div>
<AppDemoActions />
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable <span>Paginator</span></h1>
<p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<DataTable
:value="customers"
:paginator="true"
:rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[10, 20, 50]"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="company" header="Company"></Column>
<Column field="representative.name" header="Representative"></Column>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</div>
<div class="content-section implementation">
<div class="card">
<DataTable
:value="customers"
:paginator="true"
:rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[10, 20, 50]"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="company" header="Company"></Column>
<Column field="representative.name" header="Representative"></Column>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</div>
<div class="card">
<h5>Responsive Paginator</h5>
<DataTable
:value="customers"
:paginator="true"
:rows="10"
:paginatorTemplate="{
'640px': 'PrevPageLink CurrentPageReport NextPageLink',
'960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
'1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
}"
:rowsPerPageOptions="[10, 20, 50]"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="company" header="Company"></Column>
<Column field="representative.name" header="Representative"></Column>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</div>
<AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
</div>
</ClientOnly>
<AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
</div>
</template>
<script>
@ -65,7 +94,32 @@ export default {
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</DataTable>
<DataTable
:value="customers"
:paginator="true"
:rows="10"
:paginatorTemplate="{
'640px': 'PrevPageLink CurrentPageReport NextPageLink',
'960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
'1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
}"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="company" header="Company"></Column>
<Column field="representative.name" header="Representative"></Column>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</div>
</template>
@ -86,7 +140,7 @@ export default {
this.customerService.getCustomersLarge().then(data => this.customers = data);
}
}
<\\/script>
<\\/script>
`
},
'composition-api': {
@ -108,7 +162,32 @@ export default {
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</DataTable>
<DataTable
:value="customers"
:paginator="true"
:rows="10"
:paginatorTemplate="{
'640px': 'PrevPageLink CurrentPageReport NextPageLink',
'960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
'1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
}"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="company" header="Company"></Column>
<Column field="representative.name" header="Representative"></Column>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</div>
</template>
@ -128,7 +207,7 @@ export default {
return { customers }
}
}
<\\/script>
<\\/script>
`
},
'browser-source': {
@ -152,6 +231,31 @@ export default {
<p-button type="button" icon="pi pi-cloud" class="p-button-text"></p-button>
</template>
</p-datatable>
<p-datatable
:value="customers"
:paginator="true"
:rows="10"
:paginatorTemplate="{
'640px': 'PrevPageLink CurrentPageReport NextPageLink',
'960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
'1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
}"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="company" header="Company"></Column>
<Column field="representative.name" header="Representative"></Column>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</p-datatable>
</div>
<script type="module">
@ -178,7 +282,7 @@ export default {
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<\\/script>
`
}
}

6
pages/datatable/Reorder.vue
View File

@ -12,14 +12,12 @@
<div class="card">
<DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder" responsiveLayout="scroll">
<Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" />
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
</DataTable>
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
</div>
</template>

4
pages/datatable/Responsive.vue
View File

@ -50,9 +50,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
</div>
</template>

8
pages/datatable/RowExpand.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id" @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
<template #header>
<div class="table-header-container">
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
@ -21,7 +21,7 @@
<Column field="name" header="Name" sortable></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" sortable>
@ -69,9 +69,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
</div>
</template>

12
pages/datatable/RowGroup.vue
View File

@ -29,7 +29,7 @@
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span>
</template>
<template #groupfooter="slotProps">
@ -45,6 +45,7 @@
<h5>Expandable Row Groups</h5>
<p>Group customers by their representative.</p>
<DataTable
v-model:expandedRowGroups="expandedRowGroups"
:value="customers"
rowGroupMode="subheader"
groupRowsBy="representative.name"
@ -53,7 +54,6 @@
:sortOrder="1"
responsiveLayout="scroll"
:expandableRowGroups="true"
v-model:expandedRowGroups="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand"
@rowgroup-collapse="onRowGroupCollapse"
>
@ -73,7 +73,7 @@
</Column>
<Column field="date" header="Date"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span>
</template>
<template #groupfooter="slotProps">
@ -93,7 +93,7 @@
</Column>
<Column field="representative.name" header="Representative">
<template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span>
</template>
</Column>
@ -115,9 +115,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
</div>
</template>

8
pages/datatable/Scroll.vue
View File

@ -29,7 +29,7 @@
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
</div>
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{ width: '75vw' }" :maximizable="true" :modal="true" :contentStyle="{ height: '300px' }">
<Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" :maximizable="true" :modal="true" :contentStyle="{ height: '300px' }">
<DataTable :value="customers1" :scrollable="true" scrollHeight="flex">
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country.name" header="Country" style="min-width: 200px"></Column>
@ -116,7 +116,7 @@
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span>
</template>
<template #groupfooter="slotProps">
@ -126,9 +126,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
</div>
</template>

22
pages/datatable/Selection.vue
View File

@ -12,7 +12,7 @@
<div class="card">
<h5>Single</h5>
<p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
<DataTable :value="products" v-model:selection="selectedProduct1" selectionMode="single" dataKey="id" responsiveLayout="scroll">
<DataTable v-model:selection="selectedProduct1" :value="products" selectionMode="single" dataKey="id" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
@ -26,7 +26,7 @@
In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false enables multiple
selection without meta key.
</p>
<DataTable :value="products" v-model:selection="selectedProducts1" selectionMode="multiple" dataKey="id" responsiveLayout="scroll">
<DataTable v-model:selection="selectedProducts1" :value="products" selectionMode="multiple" dataKey="id" responsiveLayout="scroll">
<template #header> Multiple Selection with MetaKey </template>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@ -34,7 +34,7 @@
<Column field="quantity" header="Quantity"></Column>
</DataTable>
<DataTable :value="products" v-model:selection="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em" responsiveLayout="scroll">
<DataTable v-model:selection="selectedProducts2" :value="products" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em" responsiveLayout="scroll">
<template #header> Multiple Selection without MetaKey </template>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@ -46,7 +46,7 @@
<div class="card">
<h5>Events</h5>
<p>row-select and row-unselects are available as selection events.</p>
<DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id" @row-select="onRowSelect" @row-unselect="onRowUnselect" responsiveLayout="scroll">
<DataTable v-model:selection="selectedProduct2" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false" @row-select="onRowSelect" @row-unselect="onRowUnselect" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
@ -57,7 +57,7 @@
<div class="card">
<h5>RadioButton</h5>
<p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
<DataTable :value="products" v-model:selection="selectedProduct3" dataKey="id" responsiveLayout="scroll">
<DataTable v-model:selection="selectedProduct3" :value="products" dataKey="id" responsiveLayout="scroll">
<Column selectionMode="single" headerStyle="width: 3em"></Column>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@ -69,7 +69,7 @@
<div class="card">
<h5>Checkbox</h5>
<DataTable :value="products" v-model:selection="selectedProducts3" dataKey="id" responsiveLayout="scroll">
<DataTable v-model:selection="selectedProducts3" :value="products" dataKey="id" responsiveLayout="scroll">
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@ -79,9 +79,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
</div>
</template>
@ -141,7 +139,7 @@ export default {
<div class="card">
<h5>Events</h5>
<DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id"
<DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id" :metaKeySelection="false"
@rowSelect="onRowSelect" @rowUnselect="onRowUnselect" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@ -251,7 +249,7 @@ export default {
<div class="card">
<h5>Events</h5>
<DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id"
<DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id" :metaKeySelection="false"
@rowSelect="onRowSelect" @rowUnselect="onRowUnselect" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@ -365,7 +363,7 @@ export default {
<div class="card">
<h5>Events</h5>
<p-datatable :value="products" v-model:selection="selectedProduct2" selection-mode="single" dataKey="id"
<p-datatable :value="products" v-model:selection="selectedProduct2" selection-mode="single" data-key="id" :meta-key-selection="false"
@row-select="onRowSelect" @row-unselect="onRowUnselect" responsive-layout="scroll">
<p-column field="code" header="Code"></p-column>
<p-column field="name" header="Name"></p-column>

4
pages/datatable/Size.vue
View File

@ -40,9 +40,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
</div>
</template>

4
pages/datatable/Sort.vue
View File

@ -71,9 +71,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
</div>
</template>

28
pages/datatable/State.vue
View File

@ -12,11 +12,11 @@
<div class="card">
<h5>Session Storage</h5>
<DataTable
v-model:filters="filters1"
v-model:selection="selectedCustomer1"
:value="customers"
:paginator="true"
:rows="10"
v-model:filters="filters1"
v-model:selection="selectedCustomer1"
selectionMode="single"
dataKey="id"
stateStorage="session"
@ -31,7 +31,7 @@
</template>
<Column field="name" header="Name" :sortable="true" style="width: 25%">
<template #filter>
<InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name" />
<InputText v-model="filters1['name']" type="text" class="p-column-filter" placeholder="Search by name" />
</template>
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@ -40,19 +40,19 @@
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
<template #filter>
<InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country" />
<InputText v-model="filters1['country.name']" type="text" class="p-column-filter" placeholder="Search by country" />
</template>
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span>
</template>
<template #filter>
<MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@ -78,11 +78,11 @@
<div class="card">
<h5>Local Storage</h5>
<DataTable
v-model:filters="filters2"
v-model:selection="selectedCustomer2"
:value="customers"
:paginator="true"
:rows="10"
v-model:filters="filters2"
v-model:selection="selectedCustomer2"
selectionMode="single"
dataKey="id"
stateStorage="local"
@ -97,7 +97,7 @@
</template>
<Column field="name" header="Name" :sortable="true" style="width: 25%">
<template #filter>
<InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name" />
<InputText v-model="filters2['name']" type="text" class="p-column-filter" placeholder="Search by name" />
</template>
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@ -106,19 +106,19 @@
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
<template #filter>
<InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country" />
<InputText v-model="filters2['country.name']" type="text" class="p-column-filter" placeholder="Search by country" />
</template>
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span>
</template>
<template #filter>
<MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@ -142,9 +142,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
</div>
</template>

4
pages/datatable/Striped.vue
View File

@ -19,9 +19,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
</div>
</template>

4
pages/datatable/Style.vue
View File

@ -25,9 +25,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
</div>
</template>

6
pages/datatable/Templating.vue
View File

@ -20,7 +20,7 @@
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price">
@ -43,9 +43,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
</div>
</template>

4
pages/datatable/VirtualScroll.vue
View File

@ -61,9 +61,7 @@
</div>
</div>
<ClientOnly>
<AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
</ClientOnly>
<AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
</div>
</template>

14
pages/datatable/index.vue
View File

@ -11,14 +11,14 @@
<div class="content-section implementation">
<div class="card">
<DataTable
v-model:selection="selectedCustomers"
v-model:filters="filters"
:value="customers"
:paginator="true"
class="p-datatable-customers"
:rows="10"
dataKey="id"
:rowHover="true"
v-model:selection="selectedCustomers"
v-model:filters="filters"
filterDisplay="menu"
:loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
@ -44,7 +44,7 @@
{{ data.name }}
</template>
<template #filter="{ filterModel }">
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name" />
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
</template>
</Column>
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
@ -53,12 +53,12 @@
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country" />
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
</template>
</Column>
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span>
</template>
<template #filter="{ filterModel }">
@ -66,7 +66,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@ -130,8 +130,8 @@
</template>
<script>
import CustomerService from '../../service/CustomerService';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '../../service/CustomerService';
import DataTableDoc from './DataTableDoc';
export default {

595
pages/dataview/DataViewDoc.vue
View File

@ -1,29 +1,28 @@
<template>
<ClientOnly>
<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
<h5>Import via Module</h5>
<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<pre v-code.script><code>
import DataView from 'primevue/dataview';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>PrimeFlex</h5>
<p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
<h5>PrimeFlex</h5>
<p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
<h5>Getting Started</h5>
<p>
DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an
object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
</p>
<pre v-code.script><code><template v-pre>
<h5>Getting Started</h5>
<p>
DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an
object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
</p>
<pre v-code.script><code><template v-pre>
export default {
data() {
return {
@ -41,15 +40,15 @@ export default {
</template>
</code></pre>
<h5>Layouts</h5>
<p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas in grid mode it is "grid".</p>
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
<pre v-code><code><template v-pre>
<h5>Layouts</h5>
<p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas in grid mode it is "grid".</p>
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
<pre v-code><code><template v-pre>
&lt;template #list="slotProps"&gt;
&lt;div class="col-12"&gt;
&lt;div class="car-details"&gt;
&lt;div&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="grid"&gt;
&lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
@ -64,7 +63,7 @@ export default {
&lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="col-12 md:col-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt;
@ -73,28 +72,28 @@ export default {
</template>
</code></pre>
<h5>Sections</h5>
<p>Header and Footer are the two templates that are capable of displaying custom content.</p>
<pre v-code><code>
<h5>Sections</h5>
<p>Header and Footer are the two templates that are capable of displaying custom content.</p>
<pre v-code><code>
&lt;template #header&gt;Header Content&lt;/template&gt;
&lt;template #footer&gt;Footer Content&lt;/template&gt;
</code></pre>
<h5>Empty Message</h5>
<p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
<pre v-code><code>
<h5>Empty Message</h5>
<p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
<pre v-code><code>
&lt;template #empty&gt;No records found.&lt;/template&gt;
</code></pre>
<h5>DataViewLayoutOptions</h5>
<p>
When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView.
Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
</p>
<h5>DataViewLayoutOptions</h5>
<p>
When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView. Location of
the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code><template v-pre>
&lt;DataView :value="cars" :layout="layout"&gt;
&lt;template #header&gt;
&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
@ -109,12 +108,12 @@ export default {
</template>
</code></pre>
<h5>Paginator</h5>
<p>
Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. To customize the left and right side of the paginators, use
<i>paginatorstart</i> and <i>paginatorend</i> templates.
</p>
<pre v-code><code><template v-pre>
<h5>Paginator</h5>
<p>
Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. To customize the left and right side of the paginators, use
<i>paginatorstart</i> and <i>paginatorend</i> templates.
</p>
<pre v-code><code><template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
&lt;template #paginatorstart&gt;
&lt;Button type="button" icon="pi pi-refresh"/&gt;
@ -132,12 +131,12 @@ export default {
</template>
</code></pre>
<h5>Sorting</h5>
<p>
<i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a
dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.
</p>
<pre v-code><code><template v-pre>
<h5>Sorting</h5>
<p>
<i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a
dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.
</p>
<pre v-code><code><template v-pre>
&lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt;
&lt;div class="grid grid-nogutter"&gt;
@ -159,7 +158,7 @@ export default {
</template>
</code></pre>
<pre v-code.script><code><template v-pre>
<pre v-code.script><code><template v-pre>
export default {
data() {
return {
@ -203,12 +202,12 @@ export default {
</template>
</code></pre>
<h5>Lazy Loading</h5>
<p>
Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical
number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
</p>
<pre v-code><code><template v-pre>
<h5>Lazy Loading</h5>
<p>
Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical number
of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
</p>
<pre v-code><code><template v-pre>
&lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@ -220,7 +219,7 @@ export default {
</template>
</code></pre>
<pre v-code.script><code><template v-pre>
<pre v-code.script><code><template v-pre>
export default {
data() {
return {
@ -241,238 +240,272 @@ export default {
</template>
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>An array of objects to display.</td>
</tr>
<tr>
<td>layout</td>
<td>string</td>
<td>list</td>
<td>Layout of the items, valid values are "list" and "grid".</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
<td>0</td>
<td>Number of rows to display per page.</td>
</tr>
<tr>
<td>first</td>
<td>number</td>
<td>0</td>
<td>Index of the first record to render.</td>
</tr>
<tr>
<td>totalRecords</td>
<td>number</td>
<td>null</td>
<td>Number of total records, defaults to length of value when not defined.</td>
</tr>
<tr>
<td>paginator</td>
<td>boolean</td>
<td>false</td>
<td>When specified as true, enables the pagination.</td>
</tr>
<tr>
<td>paginatorPosition</td>
<td>string</td>
<td>bottom</td>
<td>Position of the paginator, options are "top","bottom" or "both".</td>
</tr>
<tr>
<td>alwaysShowPaginator</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show it even there is only one page.</td>
</tr>
<tr>
<td>paginatorTemplate</td>
<td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for all available options.</td>
</tr>
<tr>
<td>pageLinkSize</td>
<td>number</td>
<td>5</td>
<td>Number of page links to display.</td>
</tr>
<tr>
<td>rowsPerPageOptions</td>
<td>array</td>
<td>null</td>
<td>Array of integer values to display inside rows per page dropdown.</td>
</tr>
<tr>
<td>currentPageReportTemplate</td>
<td>string</td>
<td>({currentPage} of {totalPages})</td>
<td>Template of the current page report element.</td>
</tr>
<tr>
<td>sortField</td>
<td>string</td>
<td>null</td>
<td>Property name or a getter function of data to use in sorting by default.</td>
</tr>
<tr>
<td>sortOrder</td>
<td>number</td>
<td>null</td>
<td>Order to sort the data by default.</td>
</tr>
<tr>
<td>lazy</td>
<td>boolean</td>
<td>false</td>
<td>Defines if data is loaded and interacted with in lazy manner.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>Name of the data that uniquely identifies the a record in the data.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>An array of objects to display.</td>
</tr>
<tr>
<td>layout</td>
<td>string</td>
<td>list</td>
<td>Layout of the items, valid values are "list" and "grid".</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
<td>0</td>
<td>Number of rows to display per page.</td>
</tr>
<tr>
<td>first</td>
<td>number</td>
<td>0</td>
<td>Index of the first record to render.</td>
</tr>
<tr>
<td>totalRecords</td>
<td>number</td>
<td>null</td>
<td>Number of total records, defaults to length of value when not defined.</td>
</tr>
<tr>
<td>paginator</td>
<td>boolean</td>
<td>false</td>
<td>When specified as true, enables the pagination.</td>
</tr>
<tr>
<td>paginatorPosition</td>
<td>string</td>
<td>bottom</td>
<td>Position of the paginator, options are "top","bottom" or "both".</td>
</tr>
<tr>
<td>alwaysShowPaginator</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show it even there is only one page.</td>
</tr>
<tr>
<td>paginatorTemplate</td>
<td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
</tr>
<tr>
<td>pageLinkSize</td>
<td>number</td>
<td>5</td>
<td>Number of page links to display.</td>
</tr>
<tr>
<td>rowsPerPageOptions</td>
<td>array</td>
<td>null</td>
<td>Array of integer values to display inside rows per page dropdown.</td>
</tr>
<tr>
<td>currentPageReportTemplate</td>
<td>string</td>
<td>({currentPage} of {totalPages})</td>
<td>Template of the current page report element.</td>
</tr>
<tr>
<td>sortField</td>
<td>string</td>
<td>null</td>
<td>Property name or a getter function of data to use in sorting by default.</td>
</tr>
<tr>
<td>sortOrder</td>
<td>number</td>
<td>null</td>
<td>Order to sort the data by default.</td>
</tr>
<tr>
<td>lazy</td>
<td>boolean</td>
<td>false</td>
<td>Defines if data is loaded and interacted with in lazy manner.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>Name of the data that uniquely identifies the a record in the data.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>page</td>
<td>
event.page: New page number <br />
event.first: Index of first record <br />
event.rows: Number of rows to display in new page <br />
event.pageCount: Total number of pages
</td>
<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>page</td>
<td>
event.page: New page number <br />
event.first: Index of first record <br />
event.rows: Number of rows to display in new page <br />
event.pageCount: Total number of pages
</td>
<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>paginatorstart</td>
<td>-</td>
</tr>
<tr>
<td>paginatorend</td>
<td>-</td>
</tr>
<tr>
<td>list</td>
<td>
data: Value of the component <br />
index: Index of the list
</td>
</tr>
<tr>
<td>grid</td>
<td>
data: Value of the component <br />
index: Index of the grid
</td>
</tr>
<tr>
<td>empty</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>paginatorstart</td>
<td>-</td>
</tr>
<tr>
<td>paginatorend</td>
<td>-</td>
</tr>
<tr>
<td>list</td>
<td>
data: Value of the component <br />
index: Index of the list
</td>
</tr>
<tr>
<td>grid</td>
<td>
data: Value of the component <br />
index: Index of the grid
</td>
</tr>
<tr>
<td>empty</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-dataview</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-dataview-list</td>
<td>Container element in list layout.</td>
</tr>
<tr>
<td>p-dataview-grid</td>
<td>Container element in grid layout.</td>
</tr>
<tr>
<td>p-dataview-header</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-dataview-footer</td>
<td>Footer section.</td>
</tr>
<tr>
<td>p-dataview-content</td>
<td>Container of items.</td>
</tr>
<tr>
<td>p-dataview-emptymessage</td>
<td>Empty message element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-dataview</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-dataview-list</td>
<td>Container element in list layout.</td>
</tr>
<tr>
<td>p-dataview-grid</td>
<td>Container element in grid layout.</td>
</tr>
<tr>
<td>p-dataview-header</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-dataview-footer</td>
<td>Footer section.</td>
</tr>
<tr>
<td>p-dataview-content</td>
<td>Container of items.</td>
</tr>
<tr>
<td>p-dataview-emptymessage</td>
<td>Empty message element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>PrimeFlex</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
</p>
<p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the buttons.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Toggles the checked state of a button.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>PrimeFlex</p>
</AppDoc>
</template>
<script>

4
pages/dataview/index.vue
View File

@ -25,7 +25,7 @@
<template #list="slotProps">
<div class="col-12">
<div class="product-list-item">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
<div class="product-list-detail">
<div class="product-name">{{ slotProps.data.name }}</div>
<div class="product-description">{{ slotProps.data.description }}</div>
@ -52,7 +52,7 @@
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
</div>
<div class="product-grid-item-content">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
<div class="product-name">{{ slotProps.data.name }}</div>
<div class="product-description">{{ slotProps.data.description }}</div>
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>

96
pages/deferredcontent/DeferredContentDoc.vue
View File

@ -1,22 +1,21 @@
<template>
<ClientOnly>
<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import DeferredContent from 'primevue/deferredcontent';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/deferredcontent/deferredcontent.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>DeferredContent is used as a wrapper element of its content..</p>
<pre v-code><code><template v-pre>
<h5>Getting Started</h5>
<p>DeferredContent is used as a wrapper element of its content..</p>
<pre v-code><code><template v-pre>
&lt;DeferredContent&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -28,9 +27,9 @@ import DeferredContent from 'primevue/deferredcontent';
</template>
</code></pre>
<h5>Load Event</h5>
<p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
<pre v-code><code><template v-pre>
<h5>Load Event</h5>
<p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
<pre v-code><code><template v-pre>
&lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -42,55 +41,52 @@ import DeferredContent from 'primevue/deferredcontent';
</template>
</code></pre>
<h5>Properties</h5>
<p>Component has no properties.</p>
<h5>Properties</h5>
<p>Component has no properties.</p>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>load</td>
<td>event: Event object</td>
<td>Callback to invoke when deferred content is loaded..</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>load</td>
<td>event: Event object</td>
<td>Callback to invoke when deferred content is loaded..</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Component does not apply any styling.</p>
<h5>Styling</h5>
<p>Component does not apply any styling.</p>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so
you have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
</p>
<pre v-code><code>
<pre v-code><code>
&lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
Content
&lt;/DeferredContent&gt;
</code></pre>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
</DevelopmentSection>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

2
pages/deferredcontent/index.vue
View File

@ -13,7 +13,7 @@
<div style="height: 800px">Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.</div>
<!-- <DeferredContent @load="onImageLoad">
<img src="/demo/images/nature/nature4.jpg" alt="Nature"/>
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
</DeferredContent> -->
<div style="height: 500px"></div>

771
pages/dialog/DialogDoc.vue
View File

@ -1,28 +1,27 @@
<template>
<ClientOnly>
<AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Dialog from 'primevue/dialog';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
<pre v-code><code>
&lt;Dialog header="Header" v-model:visible="display" &gt;
Content
&lt;/Dialog&gt;
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
data() {
return {
@ -33,16 +32,16 @@ export default {
</code></pre>
<h5>Header and Footer</h5>
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
<pre v-code><code>
<h5>Header and Footer</h5>
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
<pre v-code><code>
&lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
Content
&lt;/Dialog&gt;
</code></pre>
<pre v-code><code>
<pre v-code><code>
&lt;Dialog v-model:visible="display"&gt;
&lt;template #header&gt;
&lt;h3&gt;Header&lt;/h3&gt;
@ -58,31 +57,31 @@ export default {
</code></pre>
<h5>Positioning</h5>
<p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
<pre v-code><code>
<h5>Positioning</h5>
<p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
<pre v-code><code>
&lt;Dialog position="top" v-model:visible="display"&gt;
Content
&lt;/Dialog&gt;
</code></pre>
<h5>Responsive</h5>
<p>
Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
<i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
</p>
<h5>Responsive</h5>
<p>
Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
<i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
</p>
<pre v-code><code>
<pre v-code><code>
&lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;
Content
&lt;/Dialog&gt;
</code></pre>
<h5>Initial Focus</h5>
<p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
<pre v-code><code>
<h5>Initial Focus</h5>
<p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
<pre v-code><code>
&lt;Dialog v-model:visible="display"&gt;
Content
&lt;template #footer&gt;
@ -93,264 +92,368 @@ export default {
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>any</td>
<td>null</td>
<td>Title content of the dialog.</td>
</tr>
<tr>
<td>footer</td>
<td>any</td>
<td>null</td>
<td>Footer content of the dialog.</td>
</tr>
<tr>
<td>visible</td>
<td>boolean</td>
<td>false</td>
<td>Specifies the visibility of the dialog.</td>
</tr>
<tr>
<td>modal</td>
<td>boolean</td>
<td>null</td>
<td>Defines if background should be blocked when dialog is displayed.</td>
</tr>
<tr>
<td>closeOnEscape</td>
<td>boolean</td>
<td>true</td>
<td>Specifies if pressing escape key should hide the dialog.</td>
</tr>
<tr>
<td>dismissableMask</td>
<td>boolean</td>
<td>false</td>
<td>Specifies if clicking the modal background should hide the dialog.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr>
<tr>
<td>contentStyle</td>
<td>object</td>
<td>null</td>
<td>Style of the content section.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the content section.</td>
</tr>
<tr>
<td>rtl</td>
<td>boolean</td>
<td>null</td>
<td>When enabled dialog is displayed in RTL direction.</td>
</tr>
<tr>
<td>closable</td>
<td>boolean</td>
<td>true</td>
<td>Adds a close icon to the header to hide the dialog.</td>
</tr>
<tr>
<td>showHeader</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the header or not.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
<tr>
<td>maximizable</td>
<td>boolean</td>
<td>false</td>
<td>Whether the dialog can be displayed full screen.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
<tr>
<td>draggable</td>
<td>boolean</td>
<td>true</td>
<td>Enables dragging to change the position using header.</td>
</tr>
<tr>
<td>minX</td>
<td>number</td>
<td>0</td>
<td>Minimum value for the left coordinate of dialog in dragging.</td>
</tr>
<tr>
<td>minY</td>
<td>number</td>
<td>0</td>
<td>Minimum value for the top coordinate of dialog in dragging.</td>
</tr>
<tr>
<td>keepInViewport</td>
<td>boolean</td>
<td>true</td>
<td>Keeps dialog in the viewport when dragging.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>any</td>
<td>null</td>
<td>Title content of the dialog.</td>
</tr>
<tr>
<td>footer</td>
<td>any</td>
<td>null</td>
<td>Footer content of the dialog.</td>
</tr>
<tr>
<td>visible</td>
<td>boolean</td>
<td>false</td>
<td>Specifies the visibility of the dialog.</td>
</tr>
<tr>
<td>modal</td>
<td>boolean</td>
<td>null</td>
<td>Defines if background should be blocked when dialog is displayed.</td>
</tr>
<tr>
<td>closeOnEscape</td>
<td>boolean</td>
<td>true</td>
<td>Specifies if pressing escape key should hide the dialog.</td>
</tr>
<tr>
<td>dismissableMask</td>
<td>boolean</td>
<td>false</td>
<td>Specifies if clicking the modal background should hide the dialog.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr>
<tr>
<td>contentStyle</td>
<td>object</td>
<td>null</td>
<td>Style of the content section.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the content section.</td>
</tr>
<tr>
<td>contentProps</td>
<td>null</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
</tr>
<tr>
<td>rtl</td>
<td>boolean</td>
<td>null</td>
<td>When enabled dialog is displayed in RTL direction.</td>
</tr>
<tr>
<td>closable</td>
<td>boolean</td>
<td>true</td>
<td>Adds a close icon to the header to hide the dialog.</td>
</tr>
<tr>
<td>showHeader</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the header or not.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td style="text-decoration: line-through">ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>
Aria label of the close icon.
<br />
<b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
</td>
</tr>
<tr>
<td>maximizable</td>
<td>boolean</td>
<td>false</td>
<td>Whether the dialog can be displayed full screen.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
<tr>
<td>draggable</td>
<td>boolean</td>
<td>true</td>
<td>Enables dragging to change the position using header.</td>
</tr>
<tr>
<td>minX</td>
<td>number</td>
<td>0</td>
<td>Minimum value for the left coordinate of dialog in dragging.</td>
</tr>
<tr>
<td>minY</td>
<td>number</td>
<td>0</td>
<td>Minimum value for the top coordinate of dialog in dragging.</td>
</tr>
<tr>
<td>keepInViewport</td>
<td>boolean</td>
<td>true</td>
<td>Keeps dialog in the viewport when dragging.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
</tr>
<tr>
<td>closeIcon</td>
<td>string</td>
<td>pi pi-times</td>
<td>Icon to display in the dialog close button.</td>
</tr>
<tr>
<td>maximizeIcon</td>
<td>string</td>
<td>pi pi-window-maximize</td>
<td>Icon to display in the dialog maximize button when dialog is not maximized.</td>
</tr>
<tr>
<td>minimizeIcon</td>
<td>string</td>
<td>pi pi-window-minimize</td>
<td>Icon to display in the dialog maximize button when dialog is maximized.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when dialog is hidden.</td>
</tr>
<tr>
<td>after-hide</td>
<td>-</td>
<td>Callback to invoke after dialog is hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when dialog is showed.</td>
</tr>
<tr>
<td>maximize</td>
<td>event: Event object</td>
<td>Fired when a dialog gets maximized.</td>
</tr>
<tr>
<td>unmaximize</td>
<td>event: Event object</td>
<td>Fired when a dialog gets unmaximized.</td>
</tr>
<tr>
<td>dragend</td>
<td>event: Event object</td>
<td>Fired when a dialog drag completes..</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when dialog is hidden.</td>
</tr>
<tr>
<td>after-hide</td>
<td>-</td>
<td>Callback to invoke after dialog is hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when dialog is showed.</td>
</tr>
<tr>
<td>maximize</td>
<td>event: Event object</td>
<td>Fired when a dialog gets maximized.</td>
</tr>
<tr>
<td>unmaximize</td>
<td>event: Event object</td>
<td>Fired when a dialog gets unmaximized.</td>
</tr>
<tr>
<td>dragend</td>
<td>event: Event object</td>
<td>Fired when a dialog drag completes..</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-dialog</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-dialog-titlebar</td>
<td>Container of header.</td>
</tr>
<tr>
<td>p-dialog-title</td>
<td>Header element.</td>
</tr>
<tr>
<td>p-dialog-titlebar-icon</td>
<td>Icon container inside header.</td>
</tr>
<tr>
<td>p-dialog-titlebar-close</td>
<td>Close icon element.</td>
</tr>
<tr>
<td>p-dialog-content</td>
<td>Content element</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-dialog</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-dialog-titlebar</td>
<td>Container of header.</td>
</tr>
<tr>
<td>p-dialog-title</td>
<td>Header element.</td>
</tr>
<tr>
<td>p-dialog-titlebar-icon</td>
<td>Icon container inside header.</td>
</tr>
<tr>
<td>p-dialog-titlebar-close</td>
<td>Close icon element.</td>
</tr>
<tr>
<td>p-dialog-content</td>
<td>Content element</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
addition <i>aria-modal</i> is added since focus is kept within the popup.
</p>
<p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
<p>
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
and override the default <i>aria-label</i>.
</p>
<pre v-code><code>
&lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" /&gt;
&lt;Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }"&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/Dialog&gt;
</code></pre>
<h6>Overlay Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>escape</i>
</td>
<td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
</tr>
</tbody>
</table>
</div>
<h6>Close Button Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>enter</i>
</td>
<td>Closes the dialog.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Closes the dialog.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -378,20 +481,28 @@ export default {
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
<Dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<div v-for="i in 2" :key="i">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<br />
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<br />
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<br />
</div>
<template #footer>
<Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text"/>
<Button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus />
@ -581,20 +692,28 @@ p {
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
<Dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<div v-for="i in 2" :key="i">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<br />
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<br />
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<br />
</div>
<template #footer>
<Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text"/>
<Button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus />
@ -785,20 +904,28 @@ p {
<p-button label="Long Content" icon="pi pi-external-link" @click="openBasic2"></p-button>
<p-dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<div v-for="i in 2" :key="i">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<br />
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<br />
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<br />
</div>
<template #footer>
<p-button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text"></p-button>
<p-button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus></p-button>

54
pages/dialog/index.vue
View File

@ -12,7 +12,7 @@
<div class="card">
<h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Header" v-model:visible="displayBasic" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
<Dialog v-model:visible="displayBasic" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@ -24,25 +24,29 @@
</Dialog>
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
<Dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<Dialog v-model:visible="displayBasic2" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
<div v-for="i in 2" :key="i">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<br />
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<br />
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<br />
</div>
<template #footer>
<Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text" />
<Button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus />
@ -51,7 +55,7 @@
<h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Header" v-model:visible="displayModal" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true">
<Dialog v-model:visible="displayModal" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@ -64,7 +68,7 @@
<h5>Responsive</h5>
<Button label="Show" icon="pi pi-external-link" @click="openResponsive" />
<Dialog header="Header" v-model:visible="displayResponsive" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
<Dialog v-model:visible="displayResponsive" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@ -77,7 +81,7 @@
<h5>Confirmation</h5>
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '350px' }" :modal="true">
<Dialog v-model:visible="displayConfirmation" header="Confirmation" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '350px' }" :modal="true">
<div class="confirmation-content">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span>Are you sure you want to proceed?</span>
@ -90,7 +94,7 @@
<h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Header" v-model:visible="displayMaximizable" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :maximizable="true" :modal="true">
<Dialog v-model:visible="displayMaximizable" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :maximizable="true" :modal="true">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@ -119,7 +123,7 @@
</div>
</div>
<Dialog header="Header" v-model:visible="displayPosition" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :position="position" :modal="true">
<Dialog v-model:visible="displayPosition" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :position="position" :modal="true">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

244
pages/divider/DividerDoc.vue
View File

@ -1,40 +1,39 @@
<template>
<ClientOnly>
<AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Divider from 'primevue/divider';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/divider/divider.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
<pre v-code><code>
&lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider /&gt;
&lt;div&gt;Content 2&lt;/div&gt;
</code></pre>
<h5>Border Style</h5>
<p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
<pre v-code><code>
<h5>Border Style</h5>
<p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
<pre v-code><code>
&lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider type="dashed"/&gt;
&lt;div&gt;Content 2&lt;/div&gt;
</code></pre>
<h5>Vertical Divider</h5>
<p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
<pre v-code><code>
<h5>Vertical Divider</h5>
<p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
<pre v-code><code>
&lt;div class="flex"&gt;
&lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider layout="vertical" /&gt;
@ -45,12 +44,12 @@ import Divider from 'primevue/divider';
</code></pre>
<h5>Content</h5>
<p>
Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right"
whereas vertical mode supports "top", "center" and "bottom".
</p>
<pre v-code><code>
<h5>Content</h5>
<p>
Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right"
whereas vertical mode supports "top", "center" and "bottom".
</p>
<pre v-code><code>
&lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider align="left"&gt;
@ -76,113 +75,110 @@ import Divider from 'primevue/divider';
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>string</td>
<td>null</td>
<td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td>
</tr>
<tr>
<td>layout</td>
<td>string</td>
<td>horizontal</td>
<td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>solid</td>
<td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>string</td>
<td>null</td>
<td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td>
</tr>
<tr>
<td>layout</td>
<td>string</td>
<td>horizontal</td>
<td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>solid</td>
<td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-divider</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-divider-horizontal</td>
<td>Container element in horizontal layout.</td>
</tr>
<tr>
<td>p-divider-vertical</td>
<td>Container element in vertical layout.</td>
</tr>
<tr>
<td>p-divider-solid</td>
<td>Container element with solid border.</td>
</tr>
<tr>
<td>p-divider-dashed</td>
<td>Container element with dashed border.</td>
</tr>
<tr>
<td>p-divider-dotted</td>
<td>Container element with dotted border.</td>
</tr>
<tr>
<td>p-divider-left</td>
<td>Container element with content aligned to left.</td>
</tr>
<tr>
<td>p-divider-right</td>
<td>Container element with content aligned to right.</td>
</tr>
<tr>
<td>p-divider-center</td>
<td>Container element with content aligned to center.</td>
</tr>
<tr>
<td>p-divider-bottom</td>
<td>Container element with content aligned to bottom.</td>
</tr>
<tr>
<td>p-divider-top</td>
<td>Container element with content aligned to top.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-divider</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-divider-horizontal</td>
<td>Container element in horizontal layout.</td>
</tr>
<tr>
<td>p-divider-vertical</td>
<td>Container element in vertical layout.</td>
</tr>
<tr>
<td>p-divider-solid</td>
<td>Container element with solid border.</td>
</tr>
<tr>
<td>p-divider-dashed</td>
<td>Container element with dashed border.</td>
</tr>
<tr>
<td>p-divider-dotted</td>
<td>Container element with dotted border.</td>
</tr>
<tr>
<td>p-divider-left</td>
<td>Container element with content aligned to left.</td>
</tr>
<tr>
<td>p-divider-right</td>
<td>Container element with content aligned to right.</td>
</tr>
<tr>
<td>p-divider-center</td>
<td>Container element with content aligned to center.</td>
</tr>
<tr>
<td>p-divider-bottom</td>
<td>Container element with content aligned to bottom.</td>
</tr>
<tr>
<td>p-divider-top</td>
<td>Container element with content aligned to top.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
</DevelopmentSection>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

489
pages/dock/DockDoc.vue
View File

@ -1,47 +1,46 @@
<template>
<ClientOnly>
<AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Dock from 'primevue/dock';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/slider/slider.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>
<h5>Getting Started</h5>
<p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>
<pre v-code><code>
<pre v-code><code>
&lt;Dock :model="items" /&gt;
</code></pre>
<pre v-code.script><code><template>
<pre v-code.script><code><template>
export default {
data() {
return {
items: [
{
label: "Finder",
icon: "/demo/images/dock/finder.svg"
icon: "demo/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "demo/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "demo/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "demo/images/dock/trash.png"
}
]
}
@ -51,115 +50,245 @@ import Dock from 'primevue/dock';
</template>
</code></pre>
<h5>MenuModel API</h5>
<p>Dock uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>MenuModel API</h5>
<p>Dock uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>object</td>
<td>null</td>
<td>MenuModel instance to define the action items.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>bottom</td>
<td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
</tr>
<tr>
<td>class</td>
<td>string</td>
<td>null</td>
<td>Style class of the element.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>null</td>
<td>Inline style of the element.</td>
</tr>
<tr>
<td>exact</td>
<td>boolean</td>
<td>true</td>
<td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr>
<tr>
<td>tooltipOptions</td>
<td>object</td>
<td>null</td>
<td>Whether to display the tooltip on items. The modifiers of <nuxt-link to="/tooltip">Tooltip</nuxt-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>object</td>
<td>null</td>
<td>MenuModel instance to define the action items.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>bottom</td>
<td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
</tr>
<tr>
<td>class</td>
<td>string</td>
<td>null</td>
<td>Style class of the element.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>null</td>
<td>Inline style of the element.</td>
</tr>
<tr>
<td>exact</td>
<td>boolean</td>
<td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr>
<tr>
<td>tooltipOptions</td>
<td>object</td>
<td>null</td>
<td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
</tr>
<tr>
<td>menuId</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the menu.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>0</td>
<td>Index of the element in tabbing order.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-dock</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-dock-list</td>
<td>List of items.</td>
</tr>
<tr>
<td>p-dock-item</td>
<td>Each items in list.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>focus</td>
<td>event</td>
<td>Callback to invoke when the component receives focus.</td>
</tr>
<tr>
<td>blur</td>
<td>event</td>
<td>Callback to invoke when the component loses focus.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>item: Custom content for item</td>
</tr>
<tr>
<td>icon</td>
<td>item: Custom content for icon</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-dock</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-dock-list-container</td>
<td>Container of the list.</td>
</tr>
<tr>
<td>p-dock-list</td>
<td>List of items.</td>
</tr>
<tr>
<td>p-dock-item</td>
<td>Each items in list.</td>
</tr>
<tr>
<td>p-menuitem-content</td>
<td>Content of menuitem.</td>
</tr>
<tr>
<td>p-dock-link</td>
<td>Link of the menuitem.</td>
</tr>
<tr>
<td>p-dock-icon</td>
<td>Icon of a menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>
item: Custom content for menuitem<br />
index: Index of the menuitem
</td>
</tr>
<tr>
<td>icon</td>
<td>item: Custom content for icon</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with
<i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
</p>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the first menuitem.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused menuitem.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused menuitem.</td>
</tr>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves focus to the next menuitem in vertical layout.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves focus to the previous menuitem in vertical layout.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves focus to the next menuitem in horizontal layout.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves focus to the previous menuitem in horizontal layout.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first menuitem.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -178,22 +307,22 @@ export default {
<h5>Basic</h5>
<div class="dock-window">
<Dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<Dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="right">
<Dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
@ -218,7 +347,7 @@ export default {
<div class="dock-window dock-advanced">
<Dock :model="dockItems">
<template #item="{ item }">
<a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%">
</a>
</template>
@ -260,46 +389,46 @@ export default {
dockItems: [
{
label: 'Finder',
icon: "/demo/images/dock/finder.svg",
icon: "demo/images/dock/finder.svg",
command: () => {
this.displayFinder = true;
}
},
{
label: 'Terminal',
icon: "/demo/images/dock/terminal.svg",
icon: "demo/images/dock/terminal.svg",
command: () => {
this.displayTerminal = true;
}
},
{
label: 'App Store',
icon: "/demo/images/dock/appstore.svg",
icon: "demo/images/dock/appstore.svg",
command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: "/demo/images/dock/safari.svg",
icon: "demo/images/dock/safari.svg",
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: "/demo/images/dock/photos.svg",
icon: "demo/images/dock/photos.svg",
command: () => {
this.displayPhotos = true;
}
},
{
label: 'GitHub',
icon: "/demo/images/dock/github.svg",
icon: "demo/images/dock/github.svg",
},
{
label: 'Trash',
icon: "/demo/images/dock/trash.png",
icon: "demo/images/dock/trash.png",
command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -308,19 +437,19 @@ export default {
dockBasicItems: [
{
label: "Finder",
icon: "/demo/images/dock/finder.svg"
icon: "demo/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "demo/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "demo/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "demo/images/dock/trash.png"
}
],
menubarItems: [
@ -546,7 +675,7 @@ export default {
padding: 0.5rem .75rem;
}
.p-menubar-root-list > .p-menuitem > .p-menuitem-link {
.p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
padding: 0.5rem .75rem;
> .p-submenu-icon {
@ -579,22 +708,22 @@ export default {
<h5>Basic</h5>
<div class="dock-window">
<Dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<Dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="right">
<Dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
@ -619,7 +748,7 @@ export default {
<div class="dock-window dock-advanced">
<Dock :model="dockItems">
<template #item="{ item }">
<a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</a>
</template>
@ -676,46 +805,46 @@ export default {
const dockItems = ref([
{
label: 'Finder',
icon: "/demo/images/dock/finder.svg",
icon: "demo/images/dock/finder.svg",
command: () => {
displayFinder.value = true;
}
},
{
label: 'Terminal',
icon: "/demo/images/dock/terminal.svg",
icon: "demo/images/dock/terminal.svg",
command: () => {
displayTerminal.value = true;
}
},
{
label: 'App Store',
icon: "/demo/images/dock/appstore.svg",
icon: "demo/images/dock/appstore.svg",
command: () => {
toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: "/demo/images/dock/safari.svg",
icon: "demo/images/dock/safari.svg",
command: () => {
toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: "/demo/images/dock/photos.svg",
icon: "demo/images/dock/photos.svg",
command: () => {
displayPhotos.value = true;
}
},
{
label: 'GitHub',
icon: "/demo/images/dock/github.svg",
icon: "demo/images/dock/github.svg",
},
{
label: 'Trash',
icon: "/demo/images/dock/trash.png",
icon: "demo/images/dock/trash.png",
command: () => {
toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -724,19 +853,19 @@ export default {
const dockBasicItems = ref([
{
label: "Finder",
icon: "/demo/images/dock/finder.svg"
icon: "demo/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "demo/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "demo/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "demo/images/dock/trash.png"
}
]);
const menubarItems = ref([
@ -982,7 +1111,7 @@ export default {
padding: 0.5rem .75rem;
}
.p-menubar-root-list > .p-menuitem > .p-menuitem-link {
.p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
padding: 0.5rem .75rem;
> .p-submenu-icon {
@ -1021,22 +1150,22 @@ export default {
<h5>Basic</h5>
<div class="dock-window">
<p-dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</template>
</p-dock>
<p-dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</template>
</p-dock>
<p-dock :model="dockBasicItems" position="left">
<p-dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</template>
</p-dock>
<p-dock :model="dockBasicItems" position="right">
<p-dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</template>
</p-dock>
<p-dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</template>
@ -1061,7 +1190,7 @@ export default {
<div class="dock-window dock-advanced">
<p-dock :model="dockItems">
<template #item="{ item }">
<a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</a>
</template>
@ -1115,46 +1244,46 @@ export default {
const dockItems = ref([
{
label: 'Finder',
icon: "/demo/images/dock/finder.svg",
icon: "demo/images/dock/finder.svg",
command: () => {
displayFinder.value = true;
}
},
{
label: 'Terminal',
icon: "/demo/images/dock/terminal.svg",
icon: "demo/images/dock/terminal.svg",
command: () => {
displayTerminal.value = true;
}
},
{
label: 'App Store',
icon: "/demo/images/dock/appstore.svg",
icon: "demo/images/dock/appstore.svg",
command: () => {
toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: "/demo/images/dock/safari.svg",
icon: "demo/images/dock/safari.svg",
command: () => {
toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: "/demo/images/dock/photos.svg",
icon: "demo/images/dock/photos.svg",
command: () => {
displayPhotos.value = true;
}
},
{
label: 'GitHub',
icon: "/demo/images/dock/github.svg",
icon: "demo/images/dock/github.svg",
},
{
label: 'Trash',
icon: "/demo/images/dock/trash.png",
icon: "demo/images/dock/trash.png",
command: () => {
toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -1163,19 +1292,19 @@ export default {
const dockBasicItems = ref([
{
label: "Finder",
icon: "/demo/images/dock/finder.svg"
icon: "demo/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "demo/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "demo/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "demo/images/dock/trash.png"
}
]);
const menubarItems = ref([
@ -1444,11 +1573,11 @@ export default {
padding: 0.5rem .75rem;
}
.dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
.dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
padding: 0.5rem .75rem;
}
.dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
.dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
display: none;
}

42
pages/dock/index.vue
View File

@ -13,22 +13,22 @@
<h5>Basic</h5>
<div class="dock-window">
<Dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<Dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="right">
<Dock :model="dockBasicItems" position="bottom">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
@ -53,7 +53,7 @@
<div class="dock-window dock-advanced">
<Dock :model="dockItems">
<template #item="{ item }">
<a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
@ -80,9 +80,9 @@
</template>
<script>
import TerminalService from 'primevue/terminalservice';
import NodeService from '../../service/NodeService';
import PhotoService from '../../service/PhotoService';
import TerminalService from 'primevue/terminalservice';
import DockDoc from './DockDoc.vue';
export default {
@ -97,46 +97,46 @@ export default {
dockItems: [
{
label: 'Finder',
icon: '/demo/images/dock/finder.svg',
icon: 'demo/images/dock/finder.svg',
command: () => {
this.displayFinder = true;
}
},
{
label: 'Terminal',
icon: '/demo/images/dock/terminal.svg',
icon: 'demo/images/dock/terminal.svg',
command: () => {
this.displayTerminal = true;
}
},
{
label: 'App Store',
icon: '/demo/images/dock/appstore.svg',
icon: 'demo/images/dock/appstore.svg',
command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: '/demo/images/dock/safari.svg',
icon: 'demo/images/dock/safari.svg',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: '/demo/images/dock/photos.svg',
icon: 'demo/images/dock/photos.svg',
command: () => {
this.displayPhotos = true;
}
},
{
label: 'GitHub',
icon: '/demo/images/dock/github.svg'
icon: 'demo/images/dock/github.svg'
},
{
label: 'Trash',
icon: '/demo/images/dock/trash.png',
icon: 'demo/images/dock/trash.png',
command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -145,19 +145,19 @@ export default {
dockBasicItems: [
{
label: 'Finder',
icon: '/demo/images/dock/finder.svg'
icon: 'demo/images/dock/finder.svg'
},
{
label: 'App Store',
icon: '/demo/images/dock/appstore.svg'
icon: 'demo/images/dock/appstore.svg'
},
{
label: 'Photos',
icon: '/demo/images/dock/photos.svg'
icon: 'demo/images/dock/photos.svg'
},
{
label: 'Trash',
icon: '/demo/images/dock/trash.png'
icon: 'demo/images/dock/trash.png'
}
],
menubarItems: [
@ -381,7 +381,7 @@ export default {
padding: 0.5rem 0.75rem;
}
.p-menubar-root-list > .p-menuitem > .p-menuitem-link {
.p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
padding: 0.5rem 0.75rem;
> .p-submenu-icon {

1398
pages/dropdown/DropdownDoc.vue
View File

File diff suppressed because it is too large Load Diff

2
pages/dropdown/index.vue
View File

@ -29,7 +29,7 @@
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value">
<div v-if="slotProps.value" class="country-item country-item-value">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<div>{{ slotProps.value.name }}</div>
</div>

300
pages/dynamicdialog/DynamicDialogDoc.vue
View File

@ -1,10 +1,9 @@
<template>
<ClientOnly>
<AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
<h5>DialogService</h5>
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
<AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
<h5>DialogService</h5>
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
<pre v-code.script><code>
<pre v-code.script><code>
import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';
@ -13,50 +12,50 @@ app.use(DialogService);
</code></pre>
<h5>Import via Module</h5>
<pre v-code.script><code>
<h5>Import via Module</h5>
<pre v-code.script><code>
import DynamicDialog from 'primevue/dynamicdialog';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/dynamicdialog/dynamicdialog.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
<h5>Getting Started</h5>
<p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
<pre v-code><code>
<pre v-code><code>
&lt;template&gt;
&lt;DynamicDialog /&gt;
&lt;template&gt;
</code></pre>
<h5>Options API</h5>
<p><i>$dialog</i> is available as a property in the application instance.</p>
<pre v-code.script><code>
<h5>Options API</h5>
<p><i>$dialog</i> is available as a property in the application instance.</p>
<pre v-code.script><code>
const dialogRef = this.$dialog;
</code></pre>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useDialog</i> function.</p>
<pre v-code.script><code>
<h5>Composition API</h5>
<p>The service can be injected with the <i>useDialog</i> function.</p>
<pre v-code.script><code>
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
</code></pre>
<h5>Opening a Dialog</h5>
<p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
<h5>Opening a Dialog</h5>
<p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
<h6>Options API</h6>
<pre v-code.script><code>
<h6>Options API</h6>
<pre v-code.script><code>
import ProductListDemo from './ProductListDemo';
export default {
@ -69,8 +68,8 @@ export default {
</code></pre>
<h6>Composition API</h6>
<pre v-code.script><code>
<h6>Composition API</h6>
<pre v-code.script><code>
import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';
@ -85,11 +84,11 @@ export default {
</code></pre>
<h5>Closing a Dialog</h5>
<p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
<h5>Closing a Dialog</h5>
<p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
<h6>Options API</h6>
<pre v-code.script><code>
<h6>Options API</h6>
<pre v-code.script><code>
export default {
inject: ['dialogRef'],
methods:{
@ -101,8 +100,8 @@ export default {
</code></pre>
<h6>Composition API</h6>
<pre v-code.script><code>
<h6>Composition API</h6>
<pre v-code.script><code>
import { inject } from 'vue'
export default {
@ -116,10 +115,10 @@ export default {
</code></pre>
<h5>Passing Data</h5>
<p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
<h5>Passing Data</h5>
<p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
<pre v-code.script><code>
<pre v-code.script><code>
this.$dialog.open(ProductListDemo, {
data: {
user: 'primetime'
@ -128,7 +127,7 @@ this.$dialog.open(ProductListDemo, {
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
inject: ['dialogRef'],
mounted:{
@ -138,8 +137,8 @@ export default {
</code></pre>
<p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
<pre v-code.script><code>
<p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
<pre v-code.script><code>
this.$dialog.open(ProductListDemo, {
onClose(options) {
const callbackParams = options.data; //{id: 12}
@ -148,7 +147,7 @@ this.$dialog.open(ProductListDemo, {
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
export default {
inject: ['dialogRef'],
methods:{
@ -160,10 +159,10 @@ export default {
</code></pre>
<h5>Customizing a Dialog</h5>
<p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <nuxt-link to="/dialog">Dialog</nuxt-link> documentation for the whole list of options.</p>
<h5>Customizing a Dialog</h5>
<p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p>
<pre v-code.script><code>
<pre v-code.script><code>
import { h } from 'vue';
import Button from 'primevue/button';
import ProductListDemo from './ProductListDemo';
@ -203,114 +202,119 @@ export default {
}
</code></pre>
<h5>DialogService API</h5>
<p>DialogService is the main entry point to open a dialog and load any content within.</p>
<h5>DialogService API</h5>
<p>DialogService is the main entry point to open a dialog and load any content within.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>open</td>
<td>
content: The component to load<br />
options: Configuration of the Dialog
</td>
<td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td>
</tr>
</tbody>
</table>
</div>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>open</td>
<td>
content: The component to load<br />
options: Configuration of the Dialog
</td>
<td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dialog Open Configuration API</h5>
<p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>props</td>
<td>object</td>
<td>null</td>
<td>Properties of a dialog.</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>null</td>
<td>Data to pass to the loaded component.</td>
</tr>
<tr>
<td>templates</td>
<td>object</td>
<td>null</td>
<td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
</tr>
<tr>
<td>onClose</td>
<td>function</td>
<td>null</td>
<td>Function callback to invoke when dialog is closed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dialog Open Configuration API</h5>
<p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>props</td>
<td>object</td>
<td>null</td>
<td>Properties of a dialog.</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>null</td>
<td>Data to pass to the loaded component.</td>
</tr>
<tr>
<td>templates</td>
<td>object</td>
<td>null</td>
<td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
</tr>
<tr>
<td>onClose</td>
<td>function</td>
<td>null</td>
<td>Function callback to invoke when dialog is closed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dialog Ref API</h5>
<p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>object</td>
<td>null</td>
<td>Loaded content of a dialog.</td>
</tr>
<tr>
<td>options</td>
<td>object</td>
<td>null</td>
<td>Options used to open a dialog.</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>null</td>
<td>Data passed to the dialog.</td>
</tr>
<tr>
<td>close</td>
<td>function</td>
<td>null</td>
<td>Function to close a dialog.</td>
</tr>
</tbody>
</table>
</div>
</AppDoc>
</ClientOnly>
<h5>Dialog Ref API</h5>
<p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>object</td>
<td>null</td>
<td>Loaded content of a dialog.</td>
</tr>
<tr>
<td>options</td>
<td>object</td>
<td>null</td>
<td>Options used to open a dialog.</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>null</td>
<td>Data passed to the dialog.</td>
</tr>
<tr>
<td>close</td>
<td>function</td>
<td>null</td>
<td>Function to close a dialog.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<p>DynamicDialog uses the Dialog component internally, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
@ -514,7 +518,7 @@ export default {
<p-column field="name" header="Name"></p-column>
<p-column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template>
</p-column>
<p-column field="category" header="Category"></p-column>
@ -612,7 +616,7 @@ export default {
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template>
</Column>
<Column field="category" header="Category"></Column>
@ -711,7 +715,7 @@ export default {
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template>
</Column>
<Column field="category" header="Category"></Column>

2
pages/dynamicdialog/InfoDemo.vue
View File

@ -4,7 +4,7 @@
There are <strong>{{ totalProducts }}</strong> products in total in this list.
</p>
<div class="flex justify-content-end">
<Button type="button" label="Close" @click="closeDialog"></Button>
<Button autofocus type="button" label="Close" @click="closeDialog"></Button>
</div>
</div>
</template>

2
pages/dynamicdialog/ProductListDemo.vue
View File

@ -8,7 +8,7 @@
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template>
</Column>
<Column field="category" header="Category"></Column>

5
pages/dynamicdialog/index.vue
View File

@ -21,10 +21,10 @@
</template>
<script>
import { h } from 'vue';
import Button from 'primevue/button';
import ProductListDemo from './ProductListDemo';
import { h } from 'vue';
import DynamicDialogDoc from './DynamicDialogDoc.vue';
import ProductListDemo from './ProductListDemo';
export default {
methods: {
@ -51,6 +51,7 @@ export default {
},
onClose: (options) => {
const data = options.data;
if (data) {
const buttonType = data.buttonType;
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };

25
pages/editor/index.vue
View File

@ -14,22 +14,19 @@
<Editor v-model="value1" editorStyle="height: 320px" />
<h5>Customized</h5>
<ClientOnly>
<Editor v-model="value2" editorStyle="height: 320px">
<template v-slot:toolbar>
<span class="ql-formats">
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
</span>
</template>
</Editor>
</ClientOnly>
<Editor v-model="value2" editorStyle="height: 320px">
<template v-slot:toolbar>
<span class="ql-formats">
<button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
<button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
<button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
</span>
</template>
</Editor>
</div>
</div>
<ClientOnly>
<EditorDoc />
</ClientOnly>
<EditorDoc />
</div>
</template>

338
pages/fieldset/FieldsetDoc.vue
View File

@ -1,22 +1,21 @@
<template>
<ClientOnly>
<AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Fieldset from 'primevue/fieldset';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Fieldset is a container component that accepts content as its children.</p>
<pre v-code><code>
<h5>Getting Started</h5>
<p>Fieldset is a container component that accepts content as its children.</p>
<pre v-code><code>
&lt;Fieldset legend="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@ -26,9 +25,9 @@ import Fieldset from 'primevue/fieldset';
</code></pre>
<h5>Custom Header</h5>
<p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
<pre v-code><code>
<h5>Custom Header</h5>
<p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
<pre v-code><code>
&lt;Fieldset&gt;
&lt;template #legend&gt;
Header Content
@ -38,9 +37,9 @@ import Fieldset from 'primevue/fieldset';
</code></pre>
<h5>Toggleable</h5>
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
<pre v-code><code>
<h5>Toggleable</h5>
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
<pre v-code><code>
&lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@ -50,16 +49,16 @@ import Fieldset from 'primevue/fieldset';
</code></pre>
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
<pre v-code><code>
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
<pre v-code><code>
&lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt;
Content
&lt;/Fieldset&gt;
</code></pre>
<p>Use the v-model directive to enable two-way binding.</p>
<pre v-code><code>
<p>Use the v-model directive to enable two-way binding.</p>
<pre v-code><code>
&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
&lt;Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
Content
@ -67,164 +66,161 @@ import Fieldset from 'primevue/fieldset';
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>legend</td>
<td>string</td>
<td>null</td>
<td>Header text of the fieldset.</td>
</tr>
<tr>
<td>toggleable</td>
<td>boolean</td>
<td>null</td>
<td>When specified, content can toggled by clicking the legend.</td>
</tr>
<tr>
<td>collapsed</td>
<td>boolean</td>
<td>null</td>
<td>Defines the default visibility state of the content.</td>
</tr>
<tr>
<td>toggleButtonProps</td>
<td>string</td>
<td>null</td>
<td>Uses to pass the custom value to read for the anchor inside the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>legend</td>
<td>string</td>
<td>null</td>
<td>Header text of the fieldset.</td>
</tr>
<tr>
<td>toggleable</td>
<td>boolean</td>
<td>null</td>
<td>When specified, content can toggled by clicking the legend.</td>
</tr>
<tr>
<td>collapsed</td>
<td>boolean</td>
<td>null</td>
<td>Defines the default visibility state of the content.</td>
</tr>
<tr>
<td>toggleButtonProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass the custom value to read for the anchor inside the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>
event.originalEvent: browser event <br />
event.value: collapsed state as a boolean
</td>
<td>Callback to invoke when a tab gets expanded or collapsed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>
event.originalEvent: browser event <br />
event.value: collapsed state as a boolean
</td>
<td>Callback to invoke when a tab gets expanded or collapsed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>legend</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>legend</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-fieldset</td>
<td>Fieldset element.</td>
</tr>
<tr>
<td>p-fieldset-toggleable</td>
<td>Toggleable fieldset element.</td>
</tr>
<tr>
<td>p-fieldset-legend</td>
<td>Legend element.</td>
</tr>
<tr>
<td>p-fieldset-content</td>
<td>Content element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-fieldset</td>
<td>Fieldset element.</td>
</tr>
<tr>
<td>p-fieldset-toggleable</td>
<td>Toggleable fieldset element.</td>
</tr>
<tr>
<td>p-fieldset-legend</td>
<td>Legend element.</td>
</tr>
<tr>
<td>p-fieldset-content</td>
<td>Content element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>
Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to
define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an
<i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
</p>
<p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define the
id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or
<i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
</p>
<p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
<h6>Content Toggle Button Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the next the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td><i>enter</i></td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Toggles the visibility of the content.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h6>Content Toggle Button Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the next the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td><i>enter</i></td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Toggles the visibility of the content.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

1169
pages/fileupload/FileUploadDoc.vue
View File

File diff suppressed because it is too large Load Diff

108
pages/fileupload/index.vue
View File

@ -11,12 +11,65 @@
<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">
<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
<h5>Templating</h5>
<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
<Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
<Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
</div>
<ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
>
</div>
</template>
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, fileRemoveCallback }">
<div v-if="files.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<Badge value="Pending" severity="warning" />
<Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, fileRemoveCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
</div>
</div>
</div>
<div v-if="uploadedFiles.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<Badge value="Completed" class="mt-3" severity="success" />
<Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
</div>
</div>
</div>
</template>
<template #empty>
<div class="flex align-items-center justify-content-center flex-column">
<i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
<p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
</div>
</template>
</FileUpload>
<h5>Basic</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
@ -31,11 +84,56 @@
<script>
import FileUploadDoc from './FileUploadDoc';
export default {
data() {
return {
uploadedFiles: [],
files: [],
totalSize: 0,
totalSizePercent: 0
};
},
methods: {
onRemoveTemplatingFile(file, fileRemoveCallback, index) {
fileRemoveCallback(index);
this.totalSize -= parseInt(this.formatSize(file.size));
this.totalSizePercent = this.totalSize / 10;
},
onClearTemplatingUpload(clear) {
clear();
this.totalSize = 0;
this.totalSizePercent = 0;
},
onSelectedFiles(event) {
this.files = event.files;
this.files.forEach((file) => {
this.totalSize += parseInt(this.formatSize(file.size));
});
},
onAdvancedUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
},
uploadEvent(callback) {
this.totalSizePercent = this.totalSize / 10;
callback();
},
onTemplatedUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
},
onUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
},
formatSize(bytes) {
if (bytes === 0) {
return '0 B';
}
let k = 1000,
dm = 3,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
},
components: {
@ -45,7 +143,9 @@ export default {
</script>
<style lang="scss" scoped>
p {
margin: 0;
::v-deep(.custom-progress-bar) {
.p-progressbar-value {
background-color: var(--red-500);
}
}
</style>

340
pages/filterservice/FilterServiceDoc.vue
View File

@ -1,21 +1,20 @@
<template>
<ClientOnly>
<AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
<AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import &#123;FilterService&#125; from 'primevue/api';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Getting Started</h5>
<p>Filters are accessed with <i>FilterService.filters</i>.</p>
<pre v-code.script><code>
<h5>Getting Started</h5>
<p>Filters are accessed with <i>FilterService.filters</i>.</p>
<pre v-code.script><code>
const value = 'PrimeVue';
FilterService.filters.equals(value, 'Vue'); //false
@ -30,9 +29,9 @@ FilterService.filters.in(value, ['PrimeFaces', 'PrimeVue']); //true
</code></pre>
<h5>Custom Constraint</h5>
<p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
<pre v-code.script><code>
<h5>Custom Constraint</h5>
<p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
<pre v-code.script><code>
FilterService.register('isPrimeNumber', (value, filter): boolean => &#123;
if (filter === undefined || filter === null || filter.trim() === '') &#123;
return true;
@ -51,7 +50,147 @@ FilterService.filters['isPrimeNumber'](568985673); //false
</code></pre>
<h5>Built-in Constraints</h5>
<h5>Built-in Constraints</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>startsWith</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value starts with the filter value</td>
</tr>
<tr>
<td>contains</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
</tr>
<tr>
<td>endsWith</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value ends with the filter value</td>
</tr>
<tr>
<td>equals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value</td>
</tr>
<tr>
<td>notEquals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value</td>
</tr>
<tr>
<td>in</td>
<td>
value: Value to filter<br />
filter[]: An array of filter values<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
</tr>
<tr>
<td>lt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than the filter value</td>
</tr>
<tr>
<td>lte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than or equals to the filter value</td>
</tr>
<tr>
<td>gt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than the filter value</td>
</tr>
<tr>
<td>gte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than or equals to the filter value</td>
</tr>
<tr>
<td>is</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value, alias to equals</td>
</tr>
<tr>
<td>isNot</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value, alias to notEquals.</td>
</tr>
<tr>
<td>before</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is before the filter date.</td>
</tr>
<tr>
<td>after</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is after the filter date.</td>
</tr>
</tbody>
</table>
<h5>FilterService API</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -63,178 +202,37 @@ FilterService.filters['isPrimeNumber'](568985673); //false
</thead>
<tbody>
<tr>
<td>startsWith</td>
<td>filter</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
value[]: An array of values to filter<br />
fields[]: An array of properties in the value object<br />
filterValue: Filter value<br />
filterMatchMode: Constraint<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value starts with the filter value</td>
<td>Whether the property values of the given value collection matches the filter.</td>
</tr>
<tr>
<td>contains</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
<td>filters</td>
<td>-</td>
<td>Property to access constraints collection.</td>
</tr>
<tr>
<td>endsWith</td>
<td>register</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
name: string <br />
fn: Filter callback
</td>
<td>Whether the value ends with the filter value</td>
</tr>
<tr>
<td>equals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value</td>
</tr>
<tr>
<td>notEquals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value</td>
</tr>
<tr>
<td>in</td>
<td>
value: Value to filter<br />
filter[]: An array of filter values<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
</tr>
<tr>
<td>lt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than the filter value</td>
</tr>
<tr>
<td>lte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than or equals to the filter value</td>
</tr>
<tr>
<td>gt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than the filter value</td>
</tr>
<tr>
<td>gte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than or equals to the filter value</td>
</tr>
<tr>
<td>is</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value, alias to equals</td>
</tr>
<tr>
<td>isNot</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value, alias to notEquals.</td>
</tr>
<tr>
<td>before</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is before the filter date.</td>
</tr>
<tr>
<td>after</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is after the filter date.</td>
<td>Registers a new constraint in filters.</td>
</tr>
</tbody>
</table>
<h5>FilterService API</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>filter</td>
<td>
value[]: An array of values to filter<br />
fields[]: An array of properties in the value object<br />
filterValue: Filter value<br />
filterMatchMode: Constraint<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the property values of the given value collection matches the filter.</td>
</tr>
<tr>
<td>filters</td>
<td>-</td>
<td>Property to access constraints collection.</td>
</tr>
<tr>
<td>register</td>
<td>
name: string <br />
fn: Filter callback
</td>
<td>Registers a new constraint in filters.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</ClientOnly>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>

Some files were not shown because too many files have changed in this diff Show More