vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

remove all client-only

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2022-12-20 20:28:51 +03:00
parent ee8e35aabd
commit 7625a006d2
151 changed files with 23351 additions and 23551 deletions
Download patch file Download diff file Expand all files Collapse all files

14
pages/accordion/AccordionDoc.vue
View file

@ -1,5 +1,4 @@
<template>
<ClientOnly>
<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
@ -163,13 +162,13 @@ export default {
<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>
<pre v-code><code>
&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;
&lt;p&gt;&#123;&#123;tab.content&#125;&#125;&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;/Accordion&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -406,8 +405,8 @@ export default {
<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.
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>
@ -473,8 +472,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

32
pages/autocomplete/AutoCompleteDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
<AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import AutoComplete from 'primevue/autocomplete';
@ -46,8 +45,8 @@ export default {
<h5>Dropdown</h5>
<p>
Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to
send a query with an empty string whereas "current" setting sends a query with the current value of the input.
Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to send
a query with an empty string whereas "current" setting sends a query with the current value of the input.
</p>
<pre v-code><code>
&lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt;
@ -63,8 +62,8 @@ export default {
<h5>Objects</h5>
<p>
AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with
a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.
AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.
</p>
<pre v-code><code>
&lt;AutoComplete optionLabel="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
@ -110,10 +109,10 @@ export default {
}
</code></pre>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)"
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;&lt;/AutoComplete&gt;
</template>
</code></pre>
<h5>Force Selection</h5>
@ -131,14 +130,14 @@ export default {
Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
<i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;div&gt;&#123;&#123;slotProps.item&#125;&#125;&lt;/div&gt;
&lt;/template&gt;
&lt;/AutoComplete&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -618,13 +617,13 @@ export default {
<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. The input element has <i>combobox</i> role in addition to
<i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct
screen reader which option to read during keyboard navigation within the popup list.
<i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen
reader which option to read during keyboard navigation within the popup list.
</p>
<p>In multiple mode, 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>
<p>
The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the
input element.
The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input
element.
</p>
<pre v-code><code>
@ -780,8 +779,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/avatar/AvatarDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
<AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Avatar from 'primevue/avatar';
@ -222,8 +221,7 @@ import AvatarGroup from 'primevue/avatargroup';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/badge/BadgeDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
<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>
@ -201,8 +200,7 @@ app.directive('badge', BadgeDirective);
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

13
pages/blockui/BlockUIDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
<AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import BlockUI from 'primevue/blockui';
@ -16,8 +15,8 @@ import BlockUI from 'primevue/blockui';
<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.
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;
@ -147,8 +146,7 @@ export default {
<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.
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>
@ -156,8 +154,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

18
pages/breadcrumb/BreadcrumbDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
<AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Breadcrumb from 'primevue/breadcrumb';
@ -44,25 +43,25 @@ export default {
<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>
<pre v-code><code>
&lt;Breadcrumb :home="home" :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
&lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt;
&lt;/Breadcrumb&gt;
</template>
</code></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>
<pre v-code><code>
&lt;Breadcrumb :home="home" :model="items"&gt;
&lt;template #item="{item}"&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;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/Breadcrumb&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -188,8 +187,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/button/ButtonDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Button from 'primevue/button';
@ -116,8 +115,8 @@ import Button from 'primevue/button';
<h5>Sizes</h5>
<p>
2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for
global scaling see the <router-link to="/theming">theming</router-link> page.
2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global
scaling see the <router-link to="/theming">theming</router-link> page.
</p>
<pre v-code><code>
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt;
@ -294,8 +293,7 @@ import Button from 'primevue/button';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

24
pages/calendar/CalendarDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
<AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Calendar from 'primevue/calendar';
@ -42,8 +41,8 @@ export default {
<h5>Selection Mode</h5>
<p>
By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of
selectable dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of selectable
dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
</p>
<pre v-code><code>
@ -52,9 +51,7 @@ export default {
</code></pre>
<h5>DateFormat</h5>
<p>
Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.
</p>
<p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.</p>
<pre v-code><code>
&lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt;
@ -137,14 +134,14 @@ export default {
object to represent a Date with "day", "month" and "year" properties. Example below changes the background color of dates between 10th and 15th of each month.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Calendar v-model="value"&gt;
&lt;template #date="slotProps"&gt;
&lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
&lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;&#123;&#123;slotProps.date.day&#125;&#125;&lt;/strong&gt;
&lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;&lt;/template&gt;
&lt;/template&gt;
&lt;/Calendar&gt;
</template>
</code></pre>
<pre v-code.css><code>
@ -714,8 +711,8 @@ export default {
</p>
<p>
The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
<i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and
appended to the label to be able to notify users about the current value.
<i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended
to the label to be able to notify users about the current value.
</p>
<p>
@ -902,8 +899,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/card/CardDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
<AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Card from 'primevue/card';
@ -109,8 +108,8 @@ import Card from 'primevue/card';
<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.
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>
@ -125,8 +124,7 @@ import Card from 'primevue/card';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

26
pages/carousel/CarouselDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
<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';
@ -36,7 +35,7 @@ import Carousel from 'primevue/carousel';
<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>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
@ -48,8 +47,8 @@ import Carousel from 'primevue/carousel';
&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;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
&lt;div class="car-title"&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/div&gt;
&lt;div class="car-subtitle"&gt;&#123;&#123;slotProps.data.year | slotProps.data.color&#125;&#125;&lt;/div&gt;
&lt;div class="car-buttons"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
@ -61,7 +60,7 @@ import Carousel from 'primevue/carousel';
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
</template>
</code></pre>
<pre v-code.script><code>
data() {
@ -118,9 +117,7 @@ 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>
<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;
@ -329,13 +326,13 @@ data() {
</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>.
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>.
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>
@ -430,8 +427,7 @@ data() {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

21
pages/cascadeselect/CascadeSelectDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
<AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import CascadeSelect from 'primevue/cascadeselect';
@ -114,7 +113,7 @@ data() &#123;
<h5>Templating</h5>
<p>Content of an item can be customized with the <i>option</i> template.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
&lt;template #option="slotProps"&gt;
@ -122,11 +121,11 @@ data() &#123;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/CascadeSelect&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -489,13 +488,12 @@ data() &#123;
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
<i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
</p>
<p>
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
<i>aria-selected</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and
added to each treeitem.
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
<i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
</p>
<pre v-code><code>
@ -612,8 +610,7 @@ data() &#123;
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

2
pages/chart/BarChartDoc.vue
View file

@ -1,5 +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>

2
pages/chart/ComboChartDoc.vue
View file

@ -1,5 +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>

2
pages/chart/DoughnutChartDoc.vue
View file

@ -1,5 +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>

2
pages/chart/LineChartDoc.vue
View file

@ -1,5 +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>

2
pages/chart/PieChartDoc.vue
View file

@ -1,5 +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>

2
pages/chart/PolarAreaChartDoc.vue
View file

@ -1,5 +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>

2
pages/chart/RadarChartDoc.vue
View file

@ -1,5 +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>

6
pages/checkbox/CheckboxDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
<AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Checkbox from 'primevue/checkbox';
@ -257,8 +256,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/chip/ChipDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
<AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Chip from 'primevue/chip';
@ -172,8 +171,7 @@ import Chip from 'primevue/chip';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

16
pages/chips/ChipsDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
<AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Chips from 'primevue/chips';
@ -23,16 +22,16 @@ import Chips from 'primevue/chips';
<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>
<pre v-code><code>
&lt;Chips v-model="value"&gt;
&lt;template #chip="slotProps"&gt;
&lt;div&gt;
&lt;span&gt;{{slotProps.value}} - (active) &lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.value&#125;&#125; - (active) &lt;/span&gt;
&lt;i class="pi pi-user-plus" style="font-size: 14px"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Chips&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -212,8 +211,8 @@ import Chips from 'primevue/chips';
<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.
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>
@ -285,8 +284,7 @@ import Chips from 'primevue/chips';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/colorpicker/ColorPickerDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
<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';
@ -207,8 +206,8 @@ export default {
<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.
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>
@ -302,8 +301,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

20
pages/confirmdialog/ConfirmDialogDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
<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>
@ -27,8 +26,8 @@ import ConfirmDialog from 'primevue/confirmdialog';
<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.
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;
@ -110,16 +109,16 @@ export default {
<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>
<pre v-code><code>
&lt;ConfirmPopup group="demo">
&lt;template #message="slotProps"&gt;
&lt;div class="flex p-4"&gt;
&lt;i :class="slotProps.message.icon" style="font-size: 1.5rem"&gt;&lt;/i&gt;
&lt;p class="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt;
&lt;p class="pl-2"&gt;&#123;&#123;slotProps.message.message&#125;&#125;&lt;/p&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/ConfirmPopup&gt;
</template>
</code></pre>
<h5>Responsive</h5>
@ -358,8 +357,8 @@ export default {
</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.
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>
@ -450,8 +449,7 @@ setup() {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

15
pages/confirmpopup/ConfirmPopupDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
<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>
@ -111,17 +110,16 @@ export default {
<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>
<pre v-code><code>
&lt;ConfirmPopup group="demo">
&lt;template #message="slotProps"&gt;
&lt;div class="flex p-4"&gt;
&lt;i :class="slotProps.message.icon" style="font-size: 1.5rem"&gt;&lt;/i&gt;
&lt;p class="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt;
&lt;p class="pl-2"&gt;&#123;&#123;slotProps.message.message&#125;&#125;&lt;/p&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/ConfirmPopup&gt;
</template>
</code></pre>
<h5>Confirmation Options</h5>
@ -339,8 +337,8 @@ export default {
<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.
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>
@ -432,8 +430,7 @@ setup() {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

22
pages/contextmenu/ContextMenuDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
<AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import ContextMenu from 'primevue/contextmenu';
@ -194,25 +193,25 @@ export default {
<h5>Templating</h5>
<p>ContextMenu 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>
<pre v-code><code>
&lt;ContextMenu :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
&lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt;
&lt;/ContextMenu&gt;
</template>
</code></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>
<pre v-code><code>
&lt;ContextMenu :model="items"&gt;
&lt;template #item="{item}"&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;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/ContextMenu&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -438,8 +437,8 @@ export default {
<h6>Screen Reader</h6>
<p>
ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" 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. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined
as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
<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. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
</p>
<h6>Keyboard Support</h6>
@ -522,8 +521,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

2
pages/datatable/ColGroup.vue
View file

@ -55,7 +55,7 @@
</div>
</div>
<ClientOnly><AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" /> </ClientOnly>
<AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
</div>
</template>

2
pages/datatable/ColResize.vue
View file

@ -33,7 +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>

2
pages/datatable/ColToggle.vue
View file

@ -22,7 +22,7 @@
</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>

2
pages/datatable/ContextMenu.vue
View file

@ -25,7 +25,7 @@
<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>

2
pages/datatable/Crud.vue
View file

@ -171,7 +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>

2
pages/datatable/DataTableBasicDoc.vue
View file

@ -1,5 +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>

291
pages/datatable/DataTableDoc.vue
View file

@ -1,7 +1,6 @@
<template>
<div class="content-section documentation">
<ClientOnly
><AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
<AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-small']" github="datatable/DataTableDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import DataTable from 'primevue/datatable';
@ -65,14 +64,14 @@ export default class CarService {
</code></pre>
<p>Following sample datatable has 4 columns and retrieves the data from a service on mount.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -97,11 +96,11 @@ export default {
<h5>Dynamic Columns</h5>
<p>Column components can be dynamically generated using a v-for as well.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -504,18 +503,18 @@ export default {
<h5>Auto Layout</h5>
<p>
Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do
not support auto layout due to technical limitations.
Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do not
support auto layout due to technical limitations.
</p>
<h5>Templating</h5>
<p>
Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props. On the other hand,
<i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header
and footer of the table.
<i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header and
footer of the table.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars"&gt;
&lt;template #header&gt;
&lt;div&gt;
@ -544,13 +543,13 @@ export default {
In total there are &#123;&#123;cars ? cars.length : 0 &#125;&#125; cars.
&lt;/template&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Sizes</h5>
<p>In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use <i>p-datatable-sm</i> class and for a larger one use <i>p-datatable-lg</i>.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" class="p-datatable-sm"&gt;
&lt;template #header&gt;
Small Table
@ -580,12 +579,12 @@ export default {
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Column Grouping</h5>
<p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="sales"&gt;
&lt;ColumnGroup type="header"&gt;
&lt;Row&gt;
@ -616,27 +615,27 @@ export default {
&lt;/Row&gt;
&lt;/ColumnGroup&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Pagination</h5>
<p>
Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available
customization options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available customization
options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -649,52 +648,52 @@ export default {
&lt;Button type="button" icon="pi pi-cloud" /&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p>
Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first
page. This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first page.
This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Sorting</h5>
<p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" sortMode="multiple"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p>
In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model
directive to get updated when the user applies sort a column.
In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model directive to
get updated when the user applies sort a column.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" sortField="year" :sortOrder="1"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@ -708,18 +707,18 @@ export default {
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -736,10 +735,10 @@ data() {
<h5>Filtering</h5>
<p>
DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements
are displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the
filtering are placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with
the event of your choice like @input, @change, @click.
DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements are
displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the filtering are
placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with the event of your
choice like @input, @change, @click.
</p>
<pre v-code.script><code>
@ -767,7 +766,7 @@ export default {
<h6>Filter Row</h6>
<p>Input field is displayed in a separate header row.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="customers1"
dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading"&gt;
&lt;Column field="name" header="Name"&gt;
@ -776,13 +775,13 @@ export default {
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h6>Filter Menu</h6>
<p>Input field is displayed in an overlay.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="customers1"
dataKey="id" v-model:filters="filters" filterDisplay="menu" :loading="loading"&gt;
&lt;Column field="name" header="Name"&gt;
@ -791,7 +790,7 @@ export default {
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h6>Multiple Constraints</h6>
@ -862,13 +861,13 @@ app.use(PrimeVue, {
</code></pre>
<p>If you need to override the match modes for a particular column use the <i>filterMatchModeOptions</i> property and provide an array with label-value pairs.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Column field="name" header="Name" :filterMatchModeOptions="matchModes"&gt;
&lt;template #filter="{filterModel,filterCallback}"&gt;
&lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -897,7 +896,7 @@ matchModes: [
<h6>Filter Slots</h6>
<p>Filter menu overlay can be customized even further with various templates including <i>filterheader</i>, <i>filterfooter</i>, <i>filterclear</i>, <i>filterapply</i>. Example here changes the buttons and adds a footer.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Column header="Country" filterField="country.name"&gt;
&lt;template #filter="{filterModel}"&gt;
&lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/&gt;
@ -912,48 +911,48 @@ matchModes: [
&lt;div class="px-3 pt-0 pb-3 text-center font-bold"&gt;Customized Buttons&lt;/div&gt;
&lt;/template&gt;
&lt;/Column&gt;
</template>
</code></pre>
<h5>Selection</h5>
<p>
DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using
radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using radio
buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
</p>
<p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
<p>In single mode, selection binding is an object reference.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p>
In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On
touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch
enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p>
If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox
to toggle selection of all rows.
If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to
toggle selection of all rows.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" v-model:selection="selectedCars" dataKey="vin"&gt;
&lt;Column selectionMode="multiple"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -961,19 +960,19 @@ matchModes: [
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Scrolling</h5>
<p>DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="400px"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Column Widths of a Scrollable Table</h5>
@ -984,9 +983,9 @@ matchModes: [
<li>In vertical scrolling only, use <i>flex</i> to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
</ul>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Column field="vin" header="Vin" style="flex: 0 0 4rem"&gt;&lt;/Column&gt;
</template>
</code></pre>
<h6>Flex Scroll</h6>
@ -994,7 +993,7 @@ matchModes: [
In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically
responds to the dialog size changes such as maximizing.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
&lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
@ -1008,12 +1007,12 @@ matchModes: [
&lt;Button label="No" icon="pi pi-times" @click="closeDialog" class="p-button-secondary"/&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
</template>
</code></pre>
<h6>Full Page Scroll</h6>
<p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the <router-link to="/datatable/flexscroll">full page</router-link> demo for an example.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;div style="height: calc(100vh - 143px)"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -1022,12 +1021,12 @@ matchModes: [
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
</template>
</code></pre>
<h6>Horizontal Scrolling</h6>
<p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="customers" :scrollable="true" scrollDirection="horizontal"&gt;
&lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@ -1039,12 +1038,12 @@ matchModes: [
&lt;Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h6>Horizontal and Vertical Scrolling</h6>
<p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
&lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@ -1056,26 +1055,26 @@ matchModes: [
&lt;Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h6>Frozen Rows</h6>
<p>Frozen rows are used to fix certain rows while scrolling, this data is defined with the <i>frozenValue</i> property.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="customers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h6>Frozen Columns</h6>
<p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. In addition <i>alignFrozen</i> is available to define whether the column should be fixed on the left or right.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
&lt;Column field="name" header="Name" :style="{width:'200px'}" frozen&gt;&lt;/Column&gt;
&lt;Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"&gt;&lt;/Column&gt;
@ -1088,7 +1087,7 @@ matchModes: [
&lt;Column field="representative.name" header="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
&lt;Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h6>Scrollable RowGroup</h6>
@ -1099,25 +1098,25 @@ matchModes: [
<h5>Lazy Loading</h5>
<p>
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number
of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number of
rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
</p>
<p>
Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and
filters. Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and filters.
Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
</p>
<p>Visit the <router-link to="/datatable/lazy">lazy loading</router-link> demo for an example with a remote datasource.</p>
<h5>Row Expansion</h5>
<p>
Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks
that are invoked when a row is expanded or toggled.
Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that
are invoked when a row is expanded or toggled.
</p>
<p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table significantly.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" v-model:expandedRows="expandedRows" dataKey="vin"
@row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
&lt;template #header&gt;
@ -1146,7 +1145,7 @@ matchModes: [
&lt;/div&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1190,12 +1189,12 @@ export default {
<p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.</p>
<p>
Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the
editing is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional
logic such as implementing validations.
Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the editing
is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional logic such as
implementing validations.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;h5&gt;Cell Editing&lt;/h5&gt;
&lt;DataTable :value="cars" editMode="cell" @cell-edit-complete="onCellEditComplete"&gt;
&lt;Column field="vin" header="Vin"&gt;
@ -1214,7 +1213,7 @@ export default {
&lt;template #option="optionProps"&gt;
&lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{optionProps.option.brand}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;optionProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
@ -1226,7 +1225,7 @@ export default {
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1297,7 +1296,7 @@ export default {
implementing <i>@row-edit-save</i> to update the original row data. Note that since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row
editing.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;h3&gt;Row Editing&lt;/h3&gt;
&lt;DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -1318,7 +1317,7 @@ export default {
&lt;/Column&gt;
&lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1355,48 +1354,48 @@ export default {
Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In
"expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 20%"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 40%"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 20%"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 20%"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Column Reorder</h5>
<p>
Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using
keys that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys
that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :reorderableColumns="true"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Row Reorder</h5>
<p>
Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can
be customized using <i>rowReorderIcon</i> of the column component.
Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can be
customized using <i>rowReorderIcon</i> of the column component.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt;
&lt;Column :rowReorder="true" headerStyle="width: 3em" /&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -1404,7 +1403,7 @@ export default {
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1442,7 +1441,7 @@ export default {
<p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;h3&gt;Subheader Grouping&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"&gt;
@ -1493,7 +1492,7 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1540,7 +1539,7 @@ export default {
<h5>Data Export</h5>
<p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>>
&lt;DataTable :value="cars" ref="dt"&gt;
&lt;template #header&gt;
&lt;div style="text-align: left"&gt;
@ -1552,7 +1551,7 @@ export default {
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1582,11 +1581,11 @@ export default {
<h5>TableState</h5>
<p>
Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is
easy as defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are
supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is easy as
defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are supported by
TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :paginator="true" :rows="10" v-model:filters="filters"
stateStorage="session" stateKey="dt-state-demo-session"
v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
@ -1627,7 +1626,7 @@ export default {
No records found.
&lt;/template&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1676,7 +1675,7 @@ export default {
<h5>ContextMenu</h5>
<p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" contextMenu v-model:contextMenuSelection="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -1685,7 +1684,7 @@ export default {
&lt;/DataTable&gt;
&lt;ContextMenu :model="menuModel" ref="cm" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1728,7 +1727,7 @@ export default {
<h5>Empty Message</h5>
<p>When there is no data, you may use the <i>empty</i> template to display a message.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars"&gt;
&lt;template #empty&gt;
No records found
@ -1738,15 +1737,15 @@ export default {
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Loading</h5>
<p>
A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until
the data is loaded.
A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until the
data is loaded.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :loading="loading"&gt;
&lt;template #loading&gt;
Loading records, please wait...
@ -1756,7 +1755,7 @@ export default {
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -1788,38 +1787,38 @@ export default {
<h5>Responsive</h5>
<p>
DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables
use the scroll layout approach internally and do not require additional configuration.
DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables use
the scroll layout approach internally and do not require additional configuration.
</p>
<h6>Scroll Layout</h6>
<p>
Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are
not supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are not
supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="products" responsiveLayout="scroll"&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h6>Stack Layout</h6>
<p>In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px'.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="products" responsiveLayout="stack" breakpoint="640px"&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<h5>Row and Cell Styling</h5>
<p>
Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style
class as a string.
Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style class
as a string.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DataTable :value="cars" :rowClass="rowClass"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
@ -1832,7 +1831,7 @@ export default {
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -2762,9 +2761,9 @@ export default {
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the
table for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable
headers utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table
for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers
utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
</p>
<p>
@ -2773,21 +2772,20 @@ export default {
</p>
<p>
The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties
of the <router-link to="/locale">locale</router-link> API.
The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of
the <router-link to="/locale">locale</router-link> API.
</p>
<p>
The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation
between the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
<i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and
<i>aria.apply</i> properties. <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria
labels as well.
The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between
the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
<i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and <i>aria.apply</i> properties.
<i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
</p>
<p>
Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used
for the <i>aria-label</i>.
Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used for
the <i>aria-label</i>.
</p>
<p>Paginator is a standalone component used inside the DataTable, refer to the <router-link to="/paginator">paginator</router-link> for more information about the accessibility features.</p>
@ -2935,8 +2933,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</div>
</template>

2
pages/datatable/DynamicColumns.vue
View file

@ -16,7 +16,7 @@
</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>

2
pages/datatable/Edit.vue
View file

@ -70,7 +70,7 @@
</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>

2
pages/datatable/Export.vue
View file

@ -24,7 +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>

2
pages/datatable/Filter.vue
View file

@ -220,7 +220,7 @@
</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>

2
pages/datatable/FlexScroll.vue
View file

@ -17,7 +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>

2
pages/datatable/GridLines.vue
View file

@ -21,7 +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>

2
pages/datatable/Lazy.vue
View file

@ -62,7 +62,7 @@
</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>

2
pages/datatable/Paginator.vue
View file

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

2
pages/datatable/Reorder.vue
View file

@ -17,7 +17,7 @@
</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>

2
pages/datatable/Responsive.vue
View file

@ -50,7 +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>

2
pages/datatable/RowExpand.vue
View file

@ -69,7 +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>

2
pages/datatable/RowGroup.vue
View file

@ -115,7 +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>

2
pages/datatable/Scroll.vue
View file

@ -126,7 +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>

2
pages/datatable/Selection.vue
View file

@ -79,7 +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>

2
pages/datatable/Size.vue
View file

@ -40,7 +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>

2
pages/datatable/Sort.vue
View file

@ -71,7 +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>

2
pages/datatable/State.vue
View file

@ -142,7 +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>

2
pages/datatable/Striped.vue
View file

@ -19,7 +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>

2
pages/datatable/Style.vue
View file

@ -25,7 +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>

2
pages/datatable/Templating.vue
View file

@ -43,7 +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>

2
pages/datatable/VirtualScroll.vue
View file

@ -61,7 +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>

68
pages/dataview/DataViewDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
@ -23,7 +22,7 @@ import DataView from 'primevue/dataview';
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>
<pre v-code.script><code>
export default {
data() {
return {
@ -38,13 +37,13 @@ export default {
this.carService.getCarsLarge().then(data => this.cars = data);
}
}
</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>
<pre v-code><code>
&lt;template #list="slotProps"&gt;
&lt;div class="col-12"&gt;
&lt;div class="car-details"&gt;
@ -65,12 +64,12 @@ export default {
&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;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;div class="car-detail"&gt;&#123;&#123;slotProps.data.year&#125;&#125; - &#123;&#123;slotProps.data.color&#125;&#125;&lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</code></pre>
<h5>Sections</h5>
@ -90,23 +89,23 @@ export default {
<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.
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>
&lt;DataView :value="cars" :layout="layout"&gt;
&lt;template #header&gt;
&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;/template&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</code></pre>
<h5>Paginator</h5>
@ -114,7 +113,7 @@ export default {
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>
<pre v-code><code>
&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;
@ -123,13 +122,13 @@ export default {
&lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</code></pre>
<h5>Sorting</h5>
@ -137,7 +136,7 @@ export default {
<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>
<pre v-code><code>
&lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt;
&lt;div class="grid grid-nogutter"&gt;
@ -150,16 +149,16 @@ export default {
&lt;/div&gt;
&lt;/template&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</code></pre>
<pre v-code.script><code><template v-pre>
<pre v-code.script><code>
export default {
data() {
return {
@ -200,27 +199,27 @@ 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.
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>
<pre v-code><code>
&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;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</code></pre>
<pre v-code.script><code><template v-pre>
<pre v-code.script><code>
export default {
data() {
return {
@ -238,7 +237,7 @@ export default {
}
}
}
</template>
</code></pre>
<h5>Properties</h5>
@ -472,8 +471,8 @@ export default {
<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.
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>
@ -506,8 +505,7 @@ export default {
<h5>Dependencies</h5>
<p>PrimeFlex</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

14
pages/deferredcontent/DeferredContentDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
<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';
@ -16,7 +15,7 @@ import DeferredContent from 'primevue/deferredcontent';
<h5>Getting Started</h5>
<p>DeferredContent is used as a wrapper element of its content..</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;DeferredContent&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -25,12 +24,12 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/DeferredContent&gt;
</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>
<pre v-code><code>
&lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -39,7 +38,7 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/DeferredContent&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -87,8 +86,7 @@ import DeferredContent from 'primevue/deferredcontent';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/dialog/DialogDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
<AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Dialog from 'primevue/dialog';
@ -383,8 +382,8 @@ export default {
</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>.
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>
@ -454,8 +453,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/divider/DividerDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
<AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Divider from 'primevue/divider';
@ -179,8 +178,7 @@ import Divider from 'primevue/divider';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/dock/DockDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
<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';
@ -289,8 +288,7 @@ import Dock from 'primevue/dock';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

38
pages/dropdown/DropdownDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
<AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Dropdown from 'primevue/dropdown';
@ -78,17 +77,17 @@ export default {
}
</code></pre>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Dropdown v-model="selectedGroupedCity" :options="groupedCities"
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
&lt;/Dropdown&gt;
</template>
</code></pre>
<h5>Filtering</h5>
<p>
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
</p>
<pre v-code><code>
@ -98,28 +97,28 @@ export default {
<h5>Templating</h5>
<p>
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>,
<i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>header</i>,
<i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt;
&lt;template #value="slotProps"&gt;
&lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
&lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.value.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;span v-else&gt;
{{slotProps.placeholder}}
&#123;&#123;slotProps.placeholder&#125;&#125;
&lt;/span&gt;
&lt;/template&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -633,13 +632,13 @@ export default {
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If
the editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader
which option to read during keyboard navigation within the popup list.
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
option to read during keyboard navigation within the popup list.
</p>
<p>
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the
<i>aria-activedescendant</i> of the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the <i>aria-activedescendant</i> of
the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
</p>
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
@ -815,8 +814,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/dynamicdialog/DynamicDialogDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
<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>
@ -315,8 +314,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/editor/EditorDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
<AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Editor from 'primevue/editor';
@ -192,8 +191,7 @@ import Editor from 'primevue/editor';
npm install quill --save
</code></pre>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/fieldset/FieldsetDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
<AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Fieldset from 'primevue/fieldset';
@ -183,8 +182,8 @@ import Fieldset from 'primevue/fieldset';
<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
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>
@ -221,8 +220,7 @@ import Fieldset from 'primevue/fieldset';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/fileupload/FileUploadDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
<AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import FileUpload from 'primevue/fileupload';
@ -505,8 +504,7 @@ myUploader(event) {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/filterservice/FilterServiceDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
<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';
@ -233,8 +232,7 @@ FilterService.filters['isPrimeNumber'](568985673); //false
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

2
pages/floatlabel/index.vue
View file

@ -112,7 +112,7 @@
</div>
</div>
<ClientOnly><AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" /></ClientOnly>
<AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" />
</div>
</template>

10
pages/focustrap/FocusTrapDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
<AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import FocusTrap from 'primevue/focustrap';
@ -25,11 +24,11 @@ directives: {
<h5>Getting Started</h5>
<p>FocusTrap is applied to a container element with the v-focustrap directive.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;div v-focustrap&gt;
//content
&lt;/div&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -59,8 +58,7 @@ directives: {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/fullcalendar/FullCalendarDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc
<AppDoc
name="FullCalendarDemo"
:sources="sources"
:service="['EventService']"
@ -10,8 +9,7 @@
component="FullCalendar"
>
<p>As it is not a component from PrimeVue, refer to the FullCalendar <a href="https://fullcalendar.io/docs/vue">documentation</a> for more information.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/galleria/Advanced.vue
View file

@ -49,7 +49,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
@ -65,15 +65,15 @@
&lt;div class="custom-galleria-footer"&gt;
&lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt;
&lt;span v-if="images" class="title-container"&gt;
&lt;span&gt;{{activeIndex + 1}}/{{images.length}}&lt;/span&gt;
&lt;span class="title"&gt;{{images[activeIndex].title}}&lt;/span&gt;
&lt;span&gt;{{images[activeIndex].alt}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;activeIndex + 1&#125;&#125;/&#123;&#123;images.length&#125;&#125;&lt;/span&gt;
&lt;span class="title"&gt;&#123;&#123;images[activeIndex].title&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;images[activeIndex].alt&#125;&#125;&lt;/span&gt;
&lt;/span&gt;
&lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

4
pages/galleria/AutoPlay.vue
View file

@ -23,7 +23,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
&lt;template #item="slotProps"&gt;
@ -33,7 +33,7 @@
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

8
pages/galleria/Caption.vue
View file

@ -29,7 +29,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
&lt;template #item="{item}"&gt;
&lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
@ -40,11 +40,11 @@
&lt;/div&gt;
&lt;/template&gt;
&lt;template #caption="{item}"&gt;
&lt;h4 style="margin-bottom: .5rem;"&gt;{{item.title}}&lt;/h4&gt;
&lt;p&gt;{{item.alt}}&lt;/p&gt;
&lt;h4 style="margin-bottom: .5rem;"&gt;&#123;&#123;item.title&#125;&#125;&lt;/h4&gt;
&lt;p&gt;&#123;&#123;item.alt&#125;&#125;&lt;/p&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

4
pages/galleria/FullScreen.vue
View file

@ -69,7 +69,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;h3&gt;With Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic"&gt;
@ -112,7 +112,7 @@
&lt;img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>

4
pages/galleria/GalleriaDoc.vue
View file

@ -625,7 +625,7 @@ responsiveOptions: [
<a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@ -634,7 +634,7 @@ responsiveOptions: [
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

6
pages/galleria/Indicator.vue
View file

@ -121,7 +121,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;h3&gt;Indicators with Click Event&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true"&gt;
@ -178,11 +178,11 @@
&lt;/template&gt;
&lt;template #indicator="{index}"&gt;
&lt;span style="color: #e9ecef; cursor: pointer"&gt;
{{index + 1}}
&#123;&#123;index + 1&#125;&#125;
&lt;/span&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

4
pages/galleria/Navigator.vue
View file

@ -70,7 +70,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true"&gt;
@ -114,7 +114,7 @@
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

4
pages/galleria/Programmatic.vue
View file

@ -28,7 +28,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;div style="padding: .5rem 0"&gt;
&lt;Button icon="pi pi-minus" @click="prev" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt;
@ -42,7 +42,7 @@
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

4
pages/galleria/Responsive.vue
View file

@ -23,7 +23,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@ -32,7 +32,7 @@
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

4
pages/galleria/Thumbnail.vue
View file

@ -64,7 +64,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt;
@ -108,7 +108,7 @@
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</code></pre>
<pre v-code.script><code>

6
pages/image/ImageDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
<AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Image from 'primevue/image';
@ -218,8 +217,7 @@ import Image from 'primevue/image';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

2
pages/index.vue
View file

@ -1,5 +1,4 @@
<template>
<ClientOnly>
<div :class="landingClass">
<div class="landing-intro">
<AppNews v-if="$appState.newsActive" />
@ -15,7 +14,6 @@
<FeaturesSection />
<FooterSection />
</div>
</ClientOnly>
</template>
<script>

22
pages/inplace/InplaceDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue">
<AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Inplace from 'primevue/inplace';
@ -17,7 +16,7 @@ import Inplace from 'primevue/inplace';
<h5>Getting Started</h5>
<p>Inplace requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Inplace&gt;
&lt;template #display&gt;
&lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
@ -27,12 +26,12 @@ import Inplace from 'primevue/inplace';
&lt;img src="/demo/images/nature/nature1.jpg" /&gt;
&lt;/template&gt;
&lt;/Inplace&gt;
</template>
</code></pre>
<h5>Closable</h5>
<p><i>closable</i> property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Inplace :closable="true"&gt;
&lt;template #display&gt;
&#123;&#123;text || 'Click to Edit'&#125;&#125;
@ -41,12 +40,12 @@ import Inplace from 'primevue/inplace';
&lt;InputText v-model="text" autoFocus /&gt;
&lt;/template&gt;
&lt;/Inplace&gt;
</template>
</code></pre>
<h5>Lazy Data</h5>
<p>Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Inplace @open="loadData"&gt;
&lt;template #display&gt;
View Data
@ -60,7 +59,7 @@ import Inplace from 'primevue/inplace';
&lt;/DataTable&gt;
&lt;/template&gt;
&lt;/Inplace&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -220,8 +219,8 @@ export default {
overriding the default role.
</p>
<p>
Closable inplace components displays a button 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>.
Closable inplace components displays a button 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>
<h6>View Mode Keyboard Support</h6>
@ -272,8 +271,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

2
pages/inputgroup/InputGroupDoc.vue
View file

@ -1,5 +1,5 @@
<template>
<ClientOnly><AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" /></ClientOnly>
<AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" />
</template>
<script>

6
pages/inputmask/InputMaskDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
<AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import InputMask from 'primevue/inputmask';
@ -157,8 +156,7 @@ import InputMask from 'primevue/inputmask';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

27
pages/inputnumber/InputNumberDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
<AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import InputNumber from 'primevue/inputnumber';
@ -55,10 +54,7 @@ Indian Locale
</code></pre>
<h5>Currency</h5>
<p>
Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option allows how the currency is displayed, valid values are "symbol" (default) or
"code".
</p>
<p>Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
<pre v-code><code>
United States
&lt;InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" /&gt;
@ -93,8 +89,8 @@ Temperature
<h5>Buttons</h5>
<p>
Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons,
up and down arrow keys can be used to spin the values with keyboard.
Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up
and down arrow keys can be used to spin the values with keyboard.
</p>
<pre v-code><code>
Stacked
@ -223,8 +219,8 @@ Vertical
<td>string</td>
<td>null</td>
<td>
The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro,
or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro, or
"CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
</td>
</tr>
<tr>
@ -232,8 +228,8 @@ Vertical
<td>string</td>
<td>symbol</td>
<td>
How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as
"dollar"; the default is "symbol".
How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as "dollar";
the default is "symbol".
</td>
</tr>
<tr>
@ -247,8 +243,8 @@ Vertical
<td>number</td>
<td>null</td>
<td>
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided
by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by
the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).
</td>
</tr>
<tr>
@ -511,8 +507,7 @@ Vertical
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/inputswitch/InputSwitchDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
<AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import InputSwitch from 'primevue/inputswitch';
@ -204,8 +203,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

14
pages/inputtext/InputTextDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
<AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import InputText from 'primevue/inputtext';
@ -53,8 +52,8 @@ import InputText from 'primevue/inputtext';
<h5>Sizes</h5>
<p>
2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular
field, for global scaling see the <router-link to="/theming">theming</router-link> page.
2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular field,
for global scaling see the <router-link to="/theming">theming</router-link> page.
</p>
<pre v-code><code>
&lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
@ -75,8 +74,8 @@ import InputText from 'primevue/inputtext';
<h5>Outlined vs Filled</h5>
<p>
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the
filled style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled
style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
</p>
<pre v-code><code>
@ -183,8 +182,7 @@ import InputText from 'primevue/inputtext';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

2
pages/invalid/index.vue
View file

@ -51,7 +51,7 @@
</div>
</div>
<ClientOnly><AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="invalid/InvalidDemo.vue" /></ClientOnly>
<AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="invalid/InvalidDemo.vue" />
</div>
</template>

14
pages/knob/KnobDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
<AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Knob from 'primevue/knob';
@ -45,8 +44,8 @@ data() {
<h5>Styling</h5>
<p>
<i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the
stroke of range and value sections.
<i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the stroke
of range and value sections.
</p>
<pre v-code><code>
&lt;Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" /&gt;
@ -295,11 +294,8 @@ data() {
<p>None.</p>
<h5>Knob Vue</h5>
<p>
PrimeVue Knob has no dependency however implementation is derived and inspired from <a href="https://github.com/kramer99/vue-knob-control">vue-knob-control</a> component authored by <a href="https://github.com/kramer99">kramer99</a>.
</p>
</AppDoc></ClientOnly
>
<p>PrimeVue Knob has no dependency however implementation is derived and inspired from <a href="https://github.com/kramer99/vue-knob-control">vue-knob-control</a> component authored by <a href="https://github.com/kramer99">kramer99</a>.</p>
</AppDoc>
</template>
<script>

24
pages/listbox/ListboxDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
<AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Listbox from 'primevue/listbox';
@ -86,17 +85,17 @@ export default {
}
</code></pre>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Listbox v-model="selectedGroupedCity" :options="groupedCities"
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
&lt;/Listbox&gt;
</template>
</code></pre>
<h5>Filter</h5>
<p>
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
</p>
<pre v-code><code>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt;
@ -105,19 +104,19 @@ export default {
<h5>Templating</h5>
<p>
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>optiongroup</i>, <i>header</i>,
<i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>optiongroup</i>, <i>header</i>, <i>footer</i>,
<i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt;
&lt;div&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Listbox&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -604,8 +603,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

26
pages/megamenu/MegaMenuDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
<AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import MegaMenu from 'primevue/megamenu';
@ -151,34 +150,32 @@ export default {
</code></pre>
<h5>Templating</h5>
<p>
Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item 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>
<p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code>
&lt;MegaMenu :model="items"&gt;
&lt;template #start&gt;
Before
&lt;/template&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
&lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt;
&lt;template #end&gt;
After
&lt;/template&gt;
&lt;/MegaMenu&gt;
</template>
</code></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>
<pre v-code><code>
&lt;MegaMenu :model="items"&gt;
&lt;template #item="{item}"&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;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/MegaMenu&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -367,8 +364,8 @@ export default {
<p>
MegaMenu component uses the <i>menubar</i> role along with <i>aria-orientation</i> and the value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
<i>presentation</i> role whereas anchor elements have 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. A submenu within a MegaMenu uses the
<i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define
the relation between the item and the submenu.
<i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the
relation between the item and the submenu.
</p>
<h6>Keyboard Support</h6>
@ -459,8 +456,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

22
pages/menu/MenuDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
<AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Menu from 'primevue/menu';
@ -95,25 +94,25 @@ toggle(event) {
<h5>Templating</h5>
<p>Menu 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>
<pre v-code><code>
&lt;Menu :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
&lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt;
&lt;/Menu&gt;
</template>
</code></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>
<pre v-code><code>
&lt;Menu :model="items"&gt;
&lt;template #item="{item}"&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;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/Menu&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -324,8 +323,8 @@ toggle(event) {
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Menu component uses the <i>menu</i> role 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.
Menu component uses the <i>menu</i> role 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>
<p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
@ -402,8 +401,7 @@ toggle(event) {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

33
pages/menubar/MenubarDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
<AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Menubar from 'primevue/menubar';
@ -160,35 +159,32 @@ export default {
</code></pre>
<h5>Templating</h5>
<p>
Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item 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>
<p>Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code>
&lt;Menubar :model="items"&gt;
&lt;template #start&gt;
Before
&lt;/template&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
&lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt;
&lt;template #end&gt;
After
&lt;/template&gt;
&lt;/Menubar&gt;
</template>
</code></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>
<pre v-code><code>
&lt;Menubar :model="items"&gt;
&lt;template #item="{item}"&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;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/Menubar&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -322,14 +318,14 @@ export default {
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Menubar component uses the <i>menubar</i> role 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. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root
menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
Menubar component uses the <i>menubar</i> role 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. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition,
menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
</p>
<p>
In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe
the button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the
In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe the
button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the
<i>aria-label</i>.
</p>
@ -417,8 +413,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

16
pages/message/MessageDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
<AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Message from 'primevue/message';
@ -22,9 +21,9 @@ import Message from 'primevue/message';
<p>Multiple messages can be displayed using the standard v-for directive.</p>
<pre v-code><code><template v-pre>
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
</template>
<pre v-code><code>
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;&#123;&#123;msg.content&#125;&#125;&lt;/Message&gt;
</code></pre>
<pre v-code.script><code>
@ -279,8 +278,8 @@ import InlineMessage from 'primevue/inlinemessage';
</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>.
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>
<h6>Close Button Keyboard Support</h6>
@ -311,8 +310,7 @@ import InlineMessage from 'primevue/inlinemessage';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

30
pages/multiselect/MultiSelectDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
<AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import MultiSelect from 'primevue/multiselect';
@ -87,17 +86,17 @@ export default {
}
</code></pre>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;MultiSelect v-model="selectedGroupedCities" :options="groupedCities"
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
&lt;/MultiSelect&gt;
</template>
</code></pre>
<h5>Filtering</h5>
<p>
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
</p>
<pre v-code><code>
@ -110,12 +109,12 @@ export default {
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>chip</i>,
<i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
&lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
Select Brands
@ -124,11 +123,11 @@ export default {
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/MultiSelect&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -673,14 +672,14 @@ export default {
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
<i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
</p>
<p>The popup listbox uses <i>listbox</i> as the role with <i>aria-multiselectable</i> enabled. Each list item has an <i>option</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.</p>
<p>
Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from
the <router-link to="/locale">locale</router-link> API.
Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the
<router-link to="/locale">locale</router-link> API.
</p>
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
@ -922,8 +921,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

34
pages/orderlist/OrderListDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue">
<AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import OrderList from 'primevue/orderlist';
@ -17,7 +16,7 @@ import OrderList from 'primevue/orderlist';
<h5>Getting Started</h5>
<p>OrderList requires an array as its value bound with the v-model directive and a template for its content.</p>
<p>Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the <i>item</i> and the <i>index</i> via slotProps.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
&lt;template #header&gt;
List of Cars
@ -26,24 +25,24 @@ import OrderList from 'primevue/orderlist';
&lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;span class="p-caritem-vin"&gt;&#123;&#123;slotProps.item.vin&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/OrderList&gt;
</template>
</code></pre>
<h5>Selection</h5>
<p>
In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled,
your changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your
changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
</p>
<p>Use the v-model directive to enable two-way binding.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;OrderList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
&lt;template #header&gt;
List of Cars
@ -52,13 +51,13 @@ import OrderList from 'primevue/orderlist';
&lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;span class="p-caritem-vin"&gt;&#123;&#123;slotProps.item.vin&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/OrderList&gt;
</template>
</code></pre>
<h5>DataKey</h5>
@ -276,21 +275,21 @@ import OrderList from 'primevue/orderlist';
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list
item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list item
has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
</p>
<p>
Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the
<router-link to="/locale">locale</router-link> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons like
overriding the default <i>aria-label</i> attributes.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;span id="lb"&gt;Options&lt;/span&gt;
&lt;OrderList aria-labelledby="lb" /&gt;
&lt;OrderList aria-label="City" /&gt;
</template></code></pre>
</code></pre>
<h6>ListBox Keyboard Support</h6>
<div class="doc-tablewrapper">
@ -400,8 +399,7 @@ import OrderList from 'primevue/orderlist';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

30
pages/organizationchart/OrganizationChartDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
<AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import OrganizationChart from 'primevue/organizationchart';
@ -16,13 +15,13 @@ import OrganizationChart from 'primevue/organizationchart';
<h5>Getting Started</h5>
<p>OrganizationChart requires an OrganizationChartNode instance as its root value and at least one template to display node content where node instance is passed via slotProps.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;OrganizationChart :value="data"&gt;
&lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/OrganizationChart&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -130,17 +129,17 @@ export default {
<h5>Collapsible Nodes</h5>
<p>
All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys that are collapsed, this property is two-way binding enabled
so that user changes or programmatic changes are reflected to the UI.
All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys that are collapsed, this property is two-way binding enabled so
that user changes or programmatic changes are reflected to the UI.
</p>
<p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the key of the node and value is true.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt;
&lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/OrganizationChart&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -195,13 +194,13 @@ export default {
Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that selection on a particular node can be disabled if the
<i>selectable</i> is false on the node instance.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;OrganizationChart :value="data" selecionMode="single" v-model:selectionKeys="selectionKeys"&gt;
&lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/OrganizationChart&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -252,7 +251,7 @@ export default {
<h5>Templating</h5>
<p>The <i>type</i> property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;OrganizationChart :value="data"&gt;
&lt;template #person="slotProps"&gt;
&lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
@ -265,7 +264,7 @@ export default {
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/OrganizationChart&gt;
</template>
</code></pre>
<pre v-code.script><code>
@ -486,8 +485,8 @@ export default {
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level
of reader support in the upcoming versions.
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of
reader support in the upcoming versions.
</p>
<h6>Keyboard Support</h6>
@ -524,8 +523,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

6
pages/overlaypanel/OverlayPanelDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue">
<AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import OverlayPanel from 'primevue/overlaypanel';
@ -272,8 +271,7 @@ toggle(event) {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

30
pages/paginator/PaginatorDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
<AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Paginator from 'primevue/paginator';
@ -50,8 +49,8 @@ import Paginator from 'primevue/paginator';
<h5>Template</h5>
<p>
Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements
that can be placed inside a paginator in any order.
Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
can be placed inside a paginator in any order.
</p>
<ul>
@ -79,10 +78,10 @@ import Paginator from 'primevue/paginator';
<h5>Responsive</h5>
<p>
Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if <i>default</i> key is omitted then the default template would be used. Example below
has 4 settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if <i>default</i> key is omitted then the default template would be used. Example below has
4 settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Paginator
:template="&#123;
'640px': 'PrevPageLink CurrentPageReport NextPageLink',
@ -93,12 +92,12 @@ import Paginator from 'primevue/paginator';
:rows="10"
:totalRecords="totalRecords"&gt;
&lt;/Paginator&gt;
</template>
</code></pre>
<h5>Custom Content</h5>
<p>There are two templates available named <i>start</i> and <i>end</i> to add custom content to these locations. Both templates get a state object as a slot property to provide the current page, first index and the rows.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
&lt;template #start="slotProps"&gt;
Page: &#123;&#123;slotProps.state.page&#125;&#125;
@ -109,7 +108,7 @@ import Paginator from 'primevue/paginator';
&lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt;
&lt;/Paginator&gt;
</template>
</code></pre>
<h5>Page Change Event</h5>
@ -292,8 +291,8 @@ onPage(event) {
<p>Paginator is placed inside a <i>nav</i> element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.</p>
<p>
First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of
the <router-link to="/locale">locale</router-link> API respectively.
First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of the
<router-link to="/locale">locale</router-link> API respectively.
</p>
<p>
@ -309,8 +308,8 @@ onPage(event) {
</p>
<p>
Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers
to the <i>aria.jumpToPageDropdownLabel</i> property of the <router-link to="/locale">locale</router-link> API.
Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers to
the <i>aria.jumpToPageDropdownLabel</i> property of the <router-link to="/locale">locale</router-link> API.
</p>
<h6>Keyboard Support</h6>
@ -350,8 +349,7 @@ onPage(event) {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/panel/PanelDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
<AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Panel from 'primevue/panel';
@ -212,8 +211,8 @@ import Panel from 'primevue/panel';
<h6>Screen Reader</h6>
<p>
Toggleable panels use a content toggle button at the header that 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>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
Toggleable panels use a content toggle button at the header that 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>header</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>
@ -249,8 +248,7 @@ import Panel from 'primevue/panel';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

30
pages/panelmenu/PanelMenuDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
<AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import PanelMenu from 'primevue/panelmenu';
@ -155,41 +154,41 @@ export default {
<h5>Templating</h5>
<p>PanelMenu 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>
<pre v-code><code>
&lt;PanelMenu :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
&lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt;
&lt;/PanelMenu&gt;
</template>
</code></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>
<pre v-code><code>
&lt;PanelMenu :model="items"&gt;
&lt;template #item="{item}"&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;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/PanelMenu&gt;
</template>
</code></pre>
<h5>Programmatic Control</h5>
<p>
If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node
and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
</p>
<p>Example below expands and collapses all nodes with buttons.</p>
<pre v-code><code><template v-pre>
<pre v-code><code>
&lt;div&gt;
&lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
&lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
&lt;/div&gt;
&lt;PanelMenu :model="items" v-model:expandedKeys="expandedKeys""&gt;&lt;/PanelMenu&gt;
</template>
</code></pre>
<div style="height: 400px; overflow: auto">
@ -525,8 +524,8 @@ export default {
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with
<i>aria-expanded</i> for the visibility state.
Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for
the visibility state.
</p>
<p>The content of an accordion panel 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>
@ -661,8 +660,7 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

10
pages/password/PasswordDoc.vue
View file

@ -1,6 +1,5 @@
<template>
<ClientOnly
><AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
<AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Password from 'primevue/password';
@ -296,8 +295,8 @@ import Password from 'primevue/password';
<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>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the
password using a section that has <i>aria-live</i> while typing.
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. Screen reader is notified about the changes to the strength of the password
using a section that has <i>aria-live</i> while typing.
</p>
<pre v-code><code>
@ -335,8 +334,7 @@ import Password from 'primevue/password';
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc></ClientOnly
>
</AppDoc>
</template>
<script>

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