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

Update headers

pull/345/head
cagataycivici 2020-06-17 22:29:33 +03:00
parent dd6179a545
commit b1740a9619
141 changed files with 911 additions and 931 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/AppConfigurator.vue
View File

@ -10,14 +10,14 @@
<div class="layout-config-content">
<div class="free-themes">
<h3 style="margin-top: 0">Component Scale</h3>
<h4>Component Scale</h4>
<div class="config-scale">
<Button icon="pi pi-minus" @click="decrementScale()" class="p-button-secondary" :disabled="scale === scales[0]"/>
<i class="pi pi-circle-on" v-for="s of scales" :class="{'scale-active': s === scale}" :key="s"/>
<Button icon="pi pi-plus" @click="incrementScale()" class="p-button-secondary" :disabled="scale === scales[scales.length - 1]" />
</div>
<h3>Free Themes</h3>
<h4>Free Themes</h4>
<p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
<div class="p-grid">
@ -172,7 +172,7 @@
</div>
<div class="premium-themes">
<h3>Premium Vue-CLI Template</h3>
<h4>Premium Vue-CLI Template</h4>
<p>Beautifully crafted premium <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
<div class="p-grid">
<div class="p-col-12 p-md-6">

12
src/views/Home.vue
View File

@ -13,7 +13,7 @@
</div>
<div class="features">
<h3>Features</h3>
<h5>Features</h5>
<p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
<div class="p-grid">
@ -102,7 +102,7 @@
</div>
<div class="whouses">
<h3>Key Users</h3>
<h5>Key Users</h5>
<p>The creator of PrimeVue is PrimeTek Informatics, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG and PrimeReact over the past years.</p>
<div class="p-grid">
<div class="p-col-6 p-md-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div>
@ -120,7 +120,7 @@
</div>
</div>
<div class="templates">
<h3>Premium Application Templates</h3>
<h5>Premium Application Templates</h5>
<p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p>
<div class="p-grid">
@ -168,7 +168,7 @@
</div>
</div>
<div class="templates">
<h3>Free Application Template for PrimeVue</h3>
<h5>Free Application Template for PrimeVue</h5>
<p>Sigma is a free and open source admin template based on <a href="https://cli.vuejs.org">Vue-CLI</a>.</p>
<div class="p-grid">
@ -180,7 +180,7 @@
</div>
</div>
<div class="primevue-designer">
<h3>PrimeVue Designer API</h3>
<h5>PrimeVue Designer API</h5>
<div class="p-grid">
<div class="p-col-12">
<img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
@ -194,7 +194,7 @@
<div class="prosupport">
<div class="p-grid">
<div class="p-col-12 p-md-6">
<h3>PrimeVue PRO Support</h3>
<h5>PrimeVue PRO Support</h5>
<p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p>
<p>PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.</p>
<a class="action-button" href="mailto:contact@primetek.com.tr">

12
src/views/accessibility/AccessibilityDemo.vue
View File

@ -1,18 +1,14 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<div class="content-section documentation">
<h1>Accessibility</h1>
<p>UI Components for everyone with full support for Web Content Accessibility Guidelines (WCAG).</p>
</div>
</div>
<div class="content-section documentation">
<h3 style="margin-top:0">WCAG</h3>
<h5>WCAG</h5>
<p>The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI)
of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.</p>
<h3>Accessible Components</h3>
<h5>Accessible Components</h5>
<p>PrimeVue components are implemented based on the WCAG guidelines and follow the best practices outlined here.</p>
<ul>
<li>Utilize semantic HTML where suitable.</li>
@ -23,7 +19,7 @@
<li>Avoid colors that produce optical vibrations against a dark background, which can induce eye strain.</li>
</ul>
<h3>Utility CSS Classes</h3>
<h5>Utility CSS Classes</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>

8
src/views/accordion/AccordionDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3 class="first">Default</h3>
<h5>Default</h5>
<Accordion>
<AccordionTab header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
@ -27,7 +27,7 @@
</AccordionTab>
</Accordion>
<h3>Multiple</h3>
<h5>Multiple</h5>
<Accordion :multiple="true">
<AccordionTab header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
@ -48,7 +48,7 @@
</AccordionTab>
</Accordion>
<h3>Programmatic</h3>
<h5>Programmatic</h5>
<div style="padding: .5em 0 1em 0">
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
@ -73,7 +73,7 @@
</AccordionTab>
</Accordion>
<h3>Custom Headers</h3>
<h5>Custom Headers</h5>
<Accordion class="accordion-custom">
<AccordionTab>
<template slot="header">

24
src/views/accordion/AccordionDoc.vue
View File

@ -2,13 +2,13 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
<CodeHighlight>
&lt;Accordion&gt;
@ -24,7 +24,7 @@ import AccordionTab from 'primevue/accordiontab';
&lt;/Accordion&gt;
</CodeHighlight>
<h3>Active</h3>
<h5>Active</h5>
<p>Visibility of the content is specified with the active property that supports one or two-way binding.</p>
<CodeHighlight>
&lt;Accordion&gt;
@ -55,7 +55,7 @@ import AccordionTab from 'primevue/accordiontab';
&lt;/Accordion&gt;
</CodeHighlight>
<h3>Multiple</h3>
<h5>Multiple</h5>
<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple
tabs be active at the same time.</p>
<CodeHighlight>
@ -72,7 +72,7 @@ import AccordionTab from 'primevue/accordiontab';
&lt;/Accordion&gt;
</CodeHighlight>
<h3>Disabled</h3>
<h5>Disabled</h5>
<p>A tab can be disabled by setting the disabled property to true.</p>
<CodeHighlight>
&lt;Accordion&gt;
@ -88,7 +88,7 @@ import AccordionTab from 'primevue/accordiontab';
&lt;/Accordion&gt;
</CodeHighlight>
<h3>Custom Content at Headers</h3>
<h5>Custom Content at Headers</h5>
<p>Custom content for the title section of a panel is defined using the header template.</p>
<CodeHighlight>
&lt;Accordion&gt;
@ -116,7 +116,7 @@ import AccordionTab from 'primevue/accordiontab';
&lt;/Accordion&gt;
</CodeHighlight>
<h3>Programmatic Control</h3>
<h5>Programmatic Control</h5>
<p>Tabs can be controlled programmatically using active property.</p>
<CodeHighlight>
&lt;div&gt;
@ -150,7 +150,7 @@ export default {
}
</CodeHighlight>
<h3>Properties of AccordionTab</h3>
<h5>Properties of AccordionTab</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -184,7 +184,7 @@ export default {
</table>
</div>
<h3>Properties of Accordion</h3>
<h5>Properties of Accordion</h5>
<p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -207,7 +207,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -236,7 +236,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -263,7 +263,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -8,11 +8,11 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
<h3>Dropdown and Templating</h3>
<h5>Dropdown and Templating</h5>
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Search car brands" :dropdown="true">
<template #item="slotProps">
<div class="p-autocomplete-brand-item">
@ -23,7 +23,7 @@
</AutoComplete>
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
<h3>Multiple</h3>
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
</span>

20
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import AutoComplete from 'primevue/autocomplete';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method
gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;</p>
<CodeHighlight>
@ -33,7 +33,7 @@ export default {
}
</CodeHighlight>
<h3>Dropdown</h3>
<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
@ -42,13 +42,13 @@ export default {
&lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt;
</CodeHighlight>
<h3>Multiple Mode</h3>
<h5>Multiple Mode</h5>
<p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
<CodeHighlight>
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
</CodeHighlight>
<h3>Objects</h3>
<h5>Objects</h5>
<p>AutoComplete can also work with objects using the <i>field</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>
@ -56,7 +56,7 @@ export default {
&lt;AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
</CodeHighlight>
<h3>Templating</h3>
<h5>Templating</h5>
<p>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.</p>
<CodeHighlight>
<template v-pre>
@ -69,7 +69,7 @@ export default {
</template>
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -152,7 +152,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -201,7 +201,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -244,7 +244,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

12
src/views/badge/BadgeDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Numbers</h3>
<h5>Numbers</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-success">8</span>
@ -17,7 +17,7 @@
<span class="p-badge p-badge-danger">3</span>
</div>
<h3>Tags</h3>
<h5>Tags</h5>
<div class="badges">
<span class="p-tag">Primary</span>
<span class="p-tag p-tag-success">Success</span>
@ -26,7 +26,7 @@
<span class="p-tag p-tag-danger">Danger</span>
</div>
<h3>Pills</h3>
<h5>Pills</h5>
<div class="badges">
<span class="p-tag p-tag-rounded">Primary</span>
<span class="p-tag p-tag-rounded p-tag-success">Success</span>
@ -35,7 +35,7 @@
<span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
</div>
<h3>Positioned Badge</h3>
<h5>Positioned Badge</h5>
<span class="p-overlay-badge">
<span class="p-badge">2</span>
<i class="pi pi-bell" style="font-size: 2em"></i>
@ -46,11 +46,11 @@
<Button type="button" label="New" />
</span>
<h3>Inline Button Badge</h3>
<h5>Inline Button Badge</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h3>Sizes</h3>
<h5>Sizes</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-lg p-badge-sucess">4</span>

18
src/views/badge/BadgeDoc.vue
View File

@ -2,23 +2,23 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>A badge is offered as pure css rather than a component.</p>
<h3>Numbers</h3>
<h5>Numbers</h5>
<p>Use <i>.p-badge</i> class to display numbers inside badges.</p>
<CodeHighlight>
&lt;span class="p-badge"&gt;2&lt;/span&gt;
</CodeHighlight>
<h3>Tags</h3>
<h5>Tags</h5>
<p>Tags are optimized for text rather than number and used with the <i>.p-tag</i> class. For more rounded styling like pills, add the <i>.p-tag-rounded</i> class</p>
<CodeHighlight>
&lt;span class="p-tag"&gt;New&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded"&gt;New&lt;/span&gt;
</CodeHighlight>
<h3>Severities</h3>
<h5>Severities</h5>
<p>Different options are available as severity levels with.</p>
<ul>
@ -29,7 +29,7 @@
<li>.p-badge-danger</li>
</ul>
<h3>Positoning</h3>
<h5>Positoning</h5>
<p>A badge can easily be positioned relative to another element when both are wrapped inside an element with <i>p-overlay-badge</i> class.</p>
<CodeHighlight>
&lt;span class="p-overlay-badge"&gt;
@ -43,7 +43,7 @@
&lt;/span&gt;
</CodeHighlight>
<h3>Inline Button Badges</h3>
<h5>Inline Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
<CodeHighlight>
@ -51,7 +51,7 @@
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
</CodeHighlight>
<h3>Sizes</h3>
<h5>Sizes</h5>
<p>Badge sizes are adjusted with additional classes.</p>
<CodeHighlight>
&lt;span class="p-badge"&gt;2&lt;/span&gt;
@ -65,7 +65,7 @@
&lt;h2&gt;Heading 2 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h2&gt;
</CodeHighlight>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -104,7 +104,7 @@
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/blockui/BlockUIDemo.vue
View File

@ -8,12 +8,12 @@
</div>
<div class="content-section implementation">
<h3 class="first">Document</h3>
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
<Button type="button" label="Block" @click="blockDocument()"></Button>
<h3>Panel</h3>
<h5>Panel</h5>
<Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>

14
src/views/blockui/BlockUIDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import BlockUI from 'primevue/blockui';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked
with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
</p>
@ -37,14 +37,14 @@ export default {
}
</CodeHighlight>
<h3>Full Screen</h3>
<h5>Full Screen</h5>
<p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
<CodeHighlight>
&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -85,7 +85,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -110,7 +110,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -133,7 +133,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

12
src/views/breadcrumb/BreadcrumbDoc.vue
View File

@ -2,15 +2,15 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Breadcrumb from 'primevue/breadcrumb';
</CodeHighlight>
<h3>MenuModel</h3>
<h5>MenuModel</h5>
<p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
<CodeHighlight>
&lt;Breadcrumb :home="home" :model="items" /&gt;
@ -36,7 +36,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -65,7 +65,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -96,7 +96,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

18
src/views/button/ButtonDemo.vue
View File

@ -8,16 +8,16 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Submit" disabled="disabled" />
<h3>Icons</h3>
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h3>Severities</h3>
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
@ -27,7 +27,7 @@
<Button label="Danger" class="p-button-danger" />
<Button label="Link" class="p-button-link" />
<h3>Raised Buttons</h3>
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
@ -36,7 +36,7 @@
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h3>Rounded Buttons</h3>
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
@ -45,7 +45,7 @@
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h3>Rounded Icon Buttons</h3>
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
@ -54,18 +54,18 @@
<Button icon="pi pi-lock" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<h3>Badges</h3>
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h3>Button Set</h3>
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h3>Sizes</h3>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />

30
src/views/button/ButtonDoc.vue
View File

@ -2,36 +2,36 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Button from 'primevue/button';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Button is created using the Button element.</p>
<CodeHighlight>
&lt;Button /&gt;
</CodeHighlight>
<h3>Label</h3>
<h5>Label</h5>
<p>Text of the button is defined using the <i>label</i> property.</p>
<CodeHighlight>
&lt;Button label="Submit" /&gt;
</CodeHighlight>
<h3>Icons</h3>
<h5>Icons</h5>
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
<CodeHighlight>
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
</CodeHighlight>
<h3>Events</h3>
<h5>Events</h5>
<p>Events are defined with the standard notation.</p>
<CodeHighlight>
&lt;Button label="Submit" @click="handleClick($event)"/&gt;
</CodeHighlight>
<h3>Severity</h3>
<h5>Severity</h5>
<p>Different options are available as severity levels.</p>
<ul>
@ -53,19 +53,19 @@ import Button from 'primevue/button';
&lt;Button label="Danger" class="p-button-danger" /&gt;
</CodeHighlight>
<h3>Raised and Rounded Buttons</h3>
<h5>Raised and Rounded Buttons</h5>
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
<CodeHighlight>
&lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
</CodeHighlight>
<h3>Link Buttons</h3>
<h5>Link Buttons</h5>
<p>Use "p-button-link" class to render the button as a link.</p>
<CodeHighlight>
&lt;Button label="Link" class="p-button-link" /&gt;
</CodeHighlight>
<h3>Badges</h3>
<h5>Badges</h5>
<p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
<CodeHighlight>
@ -73,7 +73,7 @@ import Button from 'primevue/button';
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
</CodeHighlight>
<h3>ButtonSet</h3>
<h5>ButtonSet</h5>
<p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
<CodeHighlight>
&lt;span class="p-buttonset"&gt;
@ -83,7 +83,7 @@ import Button from 'primevue/button';
&lt;/span&gt;
</CodeHighlight>
<h3>Sizes</h3>
<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.</p>
<CodeHighlight>
@ -92,7 +92,7 @@ import Button from 'primevue/button';
&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -139,7 +139,7 @@ import Button from 'primevue/button';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -174,7 +174,7 @@ import Button from 'primevue/button';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
@ -184,7 +184,7 @@ import Button from 'primevue/button';
</a>
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;h5&gt;Basic&lt;/h3&gt;
&lt;Button label="Submit" /&gt;
&lt;Button label="Submit" disabled="disabled" /&gt;

4
src/views/calendar/CalendarDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Popup</h3>
<h5>Popup</h5>
<div class=" p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
@ -77,7 +77,7 @@
</div>
</div>
<h3>Inline</h3>
<h5>Inline</h5>
<Calendar v-model="date14" :inline="true" :showWeek="true" />
</div>

34
src/views/calendar/CalendarDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="js">
import Calendar from 'primevue/calendar';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Two-way value binding is defined using the standard v-model directive referencing to a Date property.</p>
<CodeHighlight>
@ -24,13 +24,13 @@ export default {
}
</CodeHighlight>
<h3>Popup and Inline</h3>
<h5>Popup and Inline</h5>
<p>Calendar is displayed in a popup by default and <i>inline</i> property needs to be enabled for inline mode.</p>
<CodeHighlight>
&lt;Calendar v-model="value" :inline="true" /&gt;
</CodeHighlight>
<h3>Selection Mode</h3>
<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
@ -40,7 +40,7 @@ export default {
&lt;Calendar v-model="value" selectionMode="single || multiple || range" /&gt;
</CodeHighlight>
<h3>DateFormat</h3>
<h5>DateFormat</h5>
<p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at locale settings. Note that standalone property overrides the value in locale settings.</p>
<CodeHighlight>
@ -68,7 +68,7 @@ export default {
<li>anything else - literal text</li>
</ul>
<h3>Time</h3>
<h5>Time</h5>
<p>TimePicker is enabled with <i>showTime</i> property and 24 (default) or 12 hour mode is configured using <i>hourFormat</i> option. If you
need to use the time picker as standalone, use the <i>timeOnly</i> property.
</p>
@ -78,7 +78,7 @@ export default {
&lt;Calendar v-model="value" :showTime="true" :timeOnly="true" /&gt;
</CodeHighlight>
<h3>Date Restriction</h3>
<h5>Date Restriction</h5>
<p>To disable entering dates manually, set <i>manualInput</i> to true and to restrict selectable dates with the <i>minDate</i>
and <i>maxDate</i> options.</p>
<CodeHighlight>
@ -90,19 +90,19 @@ export default {
&lt;Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" /&gt;
</CodeHighlight>
<h3>Button Bar</h3>
<h5>Button Bar</h5>
<p>Button bar displays today and clear buttons and enabled using <i>showButtonBar</i> property.</p>
<CodeHighlight>
&lt;Calendar v-model="value" :showButtonBar="true" /&gt;
</CodeHighlight>
<h3>Multiple Months</h3>
<h5>Multiple Months</h5>
<p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p>
<CodeHighlight>
&lt;Calendar v-model="value" :numberOfMonths="3" /&gt;
</CodeHighlight>
<h3>Localization</h3>
<h5>Localization</h5>
<p>Localization for different languages and formats is defined by binding the locale settings object to the <i>locale</i> property. Following is the default values for English.</p>
<CodeHighlight>
&lt;Calendar v-model="value" :locale="en" /&gt;
@ -129,7 +129,7 @@ export default {
}
</CodeHighlight>
<h3>Custom Content</h3>
<h5>Custom Content</h5>
<p>Calendar UI accepts custom content using header and footer templates.</p>
<CodeHighlight>
@ -160,19 +160,19 @@ export default {
}
</CodeHighlight>
<h3>Month Picker</h3>
<h5>Month Picker</h5>
<p>Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.</p>
<CodeHighlight>
&lt;Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
</CodeHighlight>
<h3>Touch UI</h3>
<h5>Touch UI</h5>
<p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p>
<CodeHighlight>
&lt;Calendar v-model="value" :touchUI="true" /&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -423,7 +423,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -478,7 +478,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -541,7 +541,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

10
src/views/card/CardDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Card from 'primevue/card';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Card is used as a container.</p>
<CodeHighlight>
&lt;Card&gt;
@ -15,7 +15,7 @@ import Card from 'primevue/card';
&lt;/Card&gt;
</CodeHighlight>
<h3>Templates</h3>
<h5>Templates</h5>
<p>Card provides <i>header</i>, <i>title</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
<CodeHighlight>
&lt;Card&gt;
@ -36,7 +36,7 @@ import Card from 'primevue/card';
&lt;/Card&gt;
</CodeHighlight>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -71,7 +71,7 @@ import Card from 'primevue/card';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/carousel/CarouselDemo.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation">
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h3>Basic</h3>
<h5>Basic</h5>
</template>
<template #item="slotProps">
<div class="car-item">
@ -35,7 +35,7 @@
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h3>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h3>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
</template>
<template #item="slotProps">
<div class="car-item">
@ -61,7 +61,7 @@
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h3>Vertical</h3>
<h5>Vertical</h5>
</template>
<template #item="slotProps">
<div class="car-item">

20
src/views/carousel/CarouselDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Carousel from 'primevue/carousel';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<CodeHighlight>
&lt;Carousel :value="cars"&gt;
@ -16,7 +16,7 @@ import Carousel from 'primevue/carousel';
&lt;/Carousel&gt;
</CodeHighlight>
<h3>Items per page and Scroll Items</h3>
<h5>Items per page and Scroll Items</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<CodeHighlight>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
@ -25,7 +25,7 @@ import Carousel from 'primevue/carousel';
&lt;/Carousel&gt;
</CodeHighlight>
<h3>Responsive</h3>
<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>
<CodeHighlight>
@ -80,7 +80,7 @@ data() {
},
</CodeHighlight>
<h3>Header and Footer</h3>
<h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
<CodeHighlight>
@ -97,7 +97,7 @@ data() {
&lt;/Carousel&gt;
</CodeHighlight>
<h3>Orientation</h3>
<h5>Orientation</h5>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<CodeHighlight>
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
@ -107,7 +107,7 @@ data() {
&lt;/Carousel&gt;
</CodeHighlight>
<h3>AutoPlay and Circular</h3>
<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>
<CodeHighlight>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
@ -120,7 +120,7 @@ data() {
&lt;/Carousel&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -208,7 +208,7 @@ data() {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -255,7 +255,7 @@ data() {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

8
src/views/chart/BarChartDemo.vue
View File

@ -8,16 +8,16 @@
</div>
<div class="content-section implementation">
<h3 class="vertical">Vertical</h3>
<h5>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />
<h3>Horizontal</h3>
<h5>Horizontal</h5>
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
<h3>Multi Axis</h3>
<h5>Multi Axis</h5>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
<h3>Stacked</h3>
<h5>Stacked</h5>
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
</div>

2
src/views/chart/BarChartDoc.vue
View File

@ -4,7 +4,7 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3 class="vertical"&gt;Vertical&lt;/h3&gt;
&lt;h5&gt;Vertical&lt;/h3&gt;
&lt;Chart type="bar" :data="basicData" /&gt;
&lt;h3&gt;Horizontal&lt;/h3&gt;

18
src/views/chart/ChartDoc.vue
View File

@ -1,20 +1,20 @@
<template>
<div class="content-section documentation">
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>To begin with, charts.js package needs to be installed in your project.</p>
<CodeHighlight lang="javascript">
npm install chart.js --save
</CodeHighlight>
<h3 style="margin-top: 0">Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Chart from 'primevue/chart';
</CodeHighlight>
<h3>Chart Types</h3>
<h5>Chart Types</h5>
<p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; <b>pie</b>, <b>doughtnut</b>, <b>line</b>, <b>bar</b>, <b>radar</b> and <b>polarArea</b>.</p>
<h3>Data</h3>
<h5>Data</h5>
<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart. For more information refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
<CodeHighlight>
&lt;Chart type="bar" :data="basicData" /&gt;
@ -44,7 +44,7 @@ export default {
}
</CodeHighlight>
<h3>Options</h3>
<h5>Options</h5>
<p>While a series can be customized per dataset, general chart options are defined with options property.
Example below adds a title and customizes the legend position of the chart. For all available options refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
<CodeHighlight>
@ -76,7 +76,7 @@ options: {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -123,7 +123,7 @@ options: {
</table>
</div>
<h3>Methods</h3>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -153,7 +153,7 @@ options: {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -179,7 +179,7 @@ options: {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>

6
src/views/chart/LineChartDemo.vue
View File

@ -8,13 +8,13 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />
<h3>Multi Axis</h3>
<h5>Multi Axis</h5>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
<h3>Line Styles</h3>
<h5>Line Styles</h5>
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div>

6
src/views/checkbox/CheckboxDemo.vue
View File

@ -8,13 +8,13 @@
</div>
<div class="content-section implementation">
<h3>Basic</h3>
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h3>Multiple</h3>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
@ -33,7 +33,7 @@
</div>
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
<label :for="theme.key">{{theme.name}}</label>

14
src/views/checkbox/CheckboxDoc.vue
View File

@ -2,18 +2,18 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Checkbox from 'primevue/checkbox';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<CodeHighlight>
&lt;Checkbox v-model="checked" :binary="true" /&gt;
</CodeHighlight>
<h3>Multiple Values</h3>
<h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<CodeHighlight>
&lt;Checkbox id="city1" inputId="city1" name="city" value="Chicago" v-model="cities" /&gt;
@ -35,7 +35,7 @@ export default {
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related
checkboxes as checked by default.</p>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -64,7 +64,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -104,7 +104,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -135,7 +135,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/chips/ChipsDemo.vue
View File

@ -8,13 +8,13 @@
</div>
<div class="content-section implementation p-fluid">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<Chips v-model="value1" />
<h3>Comma Separator</h3>
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h3>Template</h3>
<h5>Template</h5>
<Chips v-model="value3">
<template #chip="slotProps">
<div>

14
src/views/chips/ChipsDoc.vue
View File

@ -2,18 +2,18 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Chips from 'primevue/chips';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>An array as the value can be bound using the standard v-model directive.</p>
<CodeHighlight>
&lt;Chips v-model="value" /&gt;
</CodeHighlight>
<h3>Custom Content</h3>
<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>
<CodeHighlight>
<template v-pre>
@ -28,7 +28,7 @@ import Chips from 'primevue/chips';
</template>
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -87,7 +87,7 @@ import Chips from 'primevue/chips';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -129,7 +129,7 @@ import Chips from 'primevue/chips';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -164,7 +164,7 @@ import Chips from 'primevue/chips';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/colorpicker/ColorPickerDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3>Inline</h3>
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h3>Overlay</h3>
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>

14
src/views/colorpicker/ColorPickerDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import ColorPicker from 'primevue/colorpicker';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<CodeHighlight>
&lt;ColorPicker v-model="color" /&gt;
@ -23,13 +23,13 @@ export default {
}
</CodeHighlight>
<h3>Inline and Overlay</h3>
<h5>Inline and Overlay</h5>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<CodeHighlight>
&lt;ColorPicker v-model="color" :inline="true" /&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -100,7 +100,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -120,7 +120,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -175,7 +175,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

18
src/views/contextmenu/ContextMenuDoc.vue
View File

@ -2,15 +2,15 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import ContextMenu from 'primevue/contextmenu';
</CodeHighlight>
<h3>MenuModel</h3>
<h5>MenuModel</h5>
<p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>ContextMenu requires a collection of menuitems as its model.</p>
<CodeHighlight lang="js">
@ -153,13 +153,13 @@ export default {
}
</CodeHighlight>
<h3>Document Menu</h3>
<h5>Document Menu</h5>
<p>Setting global property attaches the context menu to the document.</p>
<CodeHighlight>
&lt;ContextMenu :global="true" :model="items" /&gt;
</CodeHighlight>
<h3>Element Menu</h3>
<h5>Element Menu</h5>
<p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<CodeHighlight>
@ -182,7 +182,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -229,7 +229,7 @@ export default {
</table>
</div>
<h3>Methods</h3>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -259,7 +259,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -298,7 +298,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/datatable/DataTableColResizeDemo.vue
View File

@ -9,7 +9,7 @@
</div>
<div class="content-section implementation">
<h3>Fit Mode</h3>
<h5>Fit Mode</h5>
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@ -17,7 +17,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
<h3>Expand Mode</h3>
<h5>Expand Mode</h5>
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="expand">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>

74
src/views/datatable/DataTableDoc.vue
View File

@ -2,14 +2,14 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup'; //optional for column grouping
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable.
Cars are loaded by a CarService that connects to a server to fetch the cars with a axios. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.</p>
@ -81,7 +81,7 @@ export default {
}
</CodeHighlight>
<h3>Dynamic Columns</h3>
<h5>Dynamic Columns</h5>
<p>Column components can be dynamically generated using a v-for as well.</p>
<CodeHighlight>
<template v-pre>
@ -118,7 +118,7 @@ export default {
}
</CodeHighlight>
<h3>Column Component Properties utilized by the DataTable</h3>
<h5>Column Component Properties utilized by the DataTable</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -298,10 +298,10 @@ export default {
</table>
</div>
<h3>Auto Layout</h3>
<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.</p>
<h3>Templating</h3>
<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.</p>
@ -338,7 +338,7 @@ export default {
</template>
</CodeHighlight>
<h3>Sizes</h3>
<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>
@ -376,7 +376,7 @@ export default {
</template>
</CodeHighlight>
<h3>Column Grouping</h3>
<h5>Column Grouping</h5>
<p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
<CodeHighlight>
<template v-pre>
@ -413,7 +413,7 @@ export default {
</template>
</CodeHighlight>
<h3>Pagination</h3>
<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.</p>
@ -461,7 +461,7 @@ export default {
</template>
</CodeHighlight>
<h3>Sorting</h3>
<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>
@ -531,7 +531,7 @@ data() {
}
</CodeHighlight>
<h3>Filtering</h3>
<h5>Filtering</h5>
<p>Filtering is enabled by defining a filter template per column to populate the <i>filters</i> property of the DataTable. The <i>filters</i>
property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties
via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the <i>filterMatchMode</i> property that also accepts
@ -604,7 +604,7 @@ methods: {
}
</CodeHighlight>
<h3>Selection</h3>
<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 sync keyword.
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>
@ -649,7 +649,7 @@ methods: {
</template>
</CodeHighlight>
<h3>Scrolling</h3>
<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>
<CodeHighlight>
<template v-pre>
@ -662,7 +662,7 @@ methods: {
</template>
</CodeHighlight>
<h3>Flex Scroll</h3>
<h5>Flex Scroll</h5>
<p>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>
<CodeHighlight>
<template v-pre>
@ -682,7 +682,7 @@ methods: {
</template>
</CodeHighlight>
<h3>Full Page Scroll</h3>
<h5>Full Page Scroll</h5>
<p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the Full Page demo for an example.</p>
<CodeHighlight>
<template v-pre>
@ -697,7 +697,7 @@ methods: {
</template>
</CodeHighlight>
<h3>Horizontal Scrolling</h3>
<h5>Horizontal Scrolling</h5>
<p>In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.</p>
<CodeHighlight>
<template v-pre>
@ -714,7 +714,7 @@ methods: {
</template>
</CodeHighlight>
<h3>Frozen Rows and Columns</h3>
<h5>Frozen Rows and Columns</h5>
<p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. Widths of the frozen section is specified by the <i>frozenWidth</i> property.</p>
<CodeHighlight>
<template v-pre>
@ -767,7 +767,7 @@ methods: {
<p>When using frozen columns with column grouping, use <i>frozenheadergroup</i> and <i>frozenfootergroup</i> types to define grouping for the frozen section.</p>
<h3>Virtual Scrolling</h3>
<h5>Virtual Scrolling</h5>
<p>Virtual scrolling is enabled using <i>virtualScroll</i> and <i>onVirtualScroll</i> properties combined with lazy loading so that data is loaded on the fly during scrolling.
For smooth scrolling twice the amount of rows property is loaded on a lazy load event. In addition, to avoid performance problems row height is not calculated automatically and
should be provided using <i>virtualRowHeight</i> property which defaults to 28px. View the <router-link to="/datatable/scroll">scrolling demo</router-link> for a sample in-memory implementation.</p>
@ -830,7 +830,7 @@ export default {
}
</CodeHighlight>
<h3>Lazy Loading</h3>
<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. Sample belows imitates lazy paging by using an in memory list.
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
assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
@ -894,7 +894,7 @@ export default {
}
</CodeHighlight>
<h3>Row Expansion</h3>
<h5>Row Expansion</h5>
<p>Rows can be expanded to display additional content using the <i>expandedRows</i> property with the sync operator 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 signifantly.</p>
@ -967,7 +967,7 @@ export default {
}
</CodeHighlight>
<h3>InCell Editing</h3>
<h5>InCell Editing</h5>
<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>
@ -1166,7 +1166,7 @@ export default {
}
</CodeHighlight>
<h3>Column Resize</h3>
<h5>Column Resize</h5>
<p>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>
<CodeHighlight>
@ -1192,7 +1192,7 @@ export default {
</template>
</CodeHighlight>
<h3>Column Reorder</h3>
<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.</p>
<CodeHighlight>
@ -1206,7 +1206,7 @@ export default {
</template>
</CodeHighlight>
<h3>Row Reorder</h3>
<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-order</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>
<CodeHighlight>
<template v-pre>
@ -1245,7 +1245,7 @@ export default {
}
</CodeHighlight>
<h3>Row Group</h3>
<h5>Row Group</h5>
<p>Row Grouping comes in two modes, in "subheader" mode rows are grouped by a header row along with an optional group footer. In addition, the groups can be made
toggleable by enabling <i>expandableRowGroups</i> as true. On the other hand, the "rowspan" mode uses rowspans instead of a header to group rows. <i>groupRowsBy</i>
property defines the field to use in row grouping. Multiple row grouping is available in "rowspan" mode by specifying the <i>groupRowsBy</i> as an array of fields.</p>
@ -1348,7 +1348,7 @@ export default {
}
</CodeHighlight>
<h3>Data Export</h3>
<h5>Data Export</h5>
<p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p>
<CodeHighlight>
<template v-pre>
@ -1390,7 +1390,7 @@ export default {
}
</CodeHighlight>
<h3>TableState</h3>
<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.
@ -1483,7 +1483,7 @@ export default {
}
</CodeHighlight>
<h3>ContextMenu</h3>
<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.
<CodeHighlight>
<template v-pre>
@ -1535,7 +1535,7 @@ export default {
}
</CodeHighlight>
<h3>Empty Message</h3>
<h5>Empty Message</h5>
<p>When there is no data, you may use the <i>empty</i> template to display a message.</p>
<CodeHighlight>
<template v-pre>
@ -1551,7 +1551,7 @@ export default {
</template>
</CodeHighlight>
<h3>Loading</h3>
<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.</p>
<CodeHighlight>
@ -1594,7 +1594,7 @@ export default {
}
</CodeHighlight>
<h3>Responsive</h3>
<h5>Responsive</h5>
<p>DataTable display can be optimized according to screen sizes, this example demonstrates a sample demo where columns are stacked on small screens.</p>
<CodeHighlight>
<template v-pre>
@ -1683,7 +1683,7 @@ export default {
}
</CodeHighlight>
<h3>Row and Cell Styling</h3>
<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.</p>
<CodeHighlight>
@ -1745,7 +1745,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -2112,7 +2112,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -2305,7 +2305,7 @@ export default {
</table>
</div>
<h3>Methods</h3>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -2325,7 +2325,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
@ -2393,7 +2393,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/datatable/DataTableEditDemo.vue
View File

@ -10,7 +10,7 @@
</div>
<div class="content-section implementation">
<h3>Basic Cell Editing</h3>
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="cars1" editMode="cell">
<Column field="vin" header="Vin">
@ -42,7 +42,7 @@
</Column>
</DataTable>
<h3>Advanced Cell Editing</h3>
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
@ -52,7 +52,7 @@
</Column>
</DataTable>
<h3>Row Editing</h3>
<h5>Row Editing</h5>
<DataTable :value="cars3" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
<Column field="vin" header="Vin"></Column>

6
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Subheader Grouping</h3>
<h5>Subheader Grouping</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
<Column field="brand" header="Brand"></Column>
@ -25,7 +25,7 @@
</template>
</DataTable>
<h3>Expandable Row Groups</h3>
<h5>Expandable Row Groups</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
@ -44,7 +44,7 @@
</template>
</DataTable>
<h3>RowSpan Grouping</h3>
<h5>RowSpan Grouping</h5>
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
<Column header="#" headerStyle="width:3em">

12
src/views/datatable/DataTableScrollDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Vertical</h3>
<h5>Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@ -16,7 +16,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
<h3>Flexible Scroll</h3>
<h5>Flexible Scroll</h5>
<p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table.
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
@ -34,7 +34,7 @@
</template>
</Dialog>
<h3>Virtual Scroll</h3>
<h5>Virtual Scroll</h5>
<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="vin" header="Vin">
@ -59,7 +59,7 @@
</Column>
</DataTable>
<h3>Horizontal and Vertical</h3>
<h5>Horizontal and Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"></Column>
@ -71,7 +71,7 @@
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
</DataTable>
<h3>Frozen Rows</h3>
<h5>Frozen Rows</h5>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@ -79,7 +79,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
<h3>Frozen Columns</h3>
<h5>Frozen Columns</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
<template #body="slotProps">

12
src/views/datatable/DataTableSelectionDemo.vue
View File

@ -9,7 +9,7 @@
<div class="content-section implementation">
<div class="card">
<h3 class="first">Single</h3>
<h5>Single</h5>
<p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
<DataTable :value="cars" :selection.sync="selectedCar1" selectionMode="single" dataKey="vin">
<Column field="vin" header="Vin"></Column>
@ -20,7 +20,7 @@
</div>
<div class="card">
<h3>Multiple</h3>
<h5>Multiple</h5>
<p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
Setting metaKeySelection property as false enables multiple selection without meta key.</p>
<DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin">
@ -45,7 +45,7 @@
</div>
<div class="card">
<h3>Events</h3>
<h5>Events</h5>
<p>row-select and row-unselects are available as selection events.</p>
<DataTable :value="cars" :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
@row-select="onRowSelect" @row-unselect="onRowUnselect">
@ -57,7 +57,7 @@
</div>
<div class="card">
<h3>RadioButton</h3>
<h5>RadioButton</h5>
<p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
<DataTable :value="cars" :selection.sync="selectedCar3" dataKey="vin">
<Column selectionMode="single" headerStyle="width: 3em"></Column>
@ -69,7 +69,7 @@
</div>
<div class="card">
<h3>Checkbox</h3>
<h5>Checkbox</h5>
<p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p>
<DataTable :value="cars" :selection.sync="selectedCars3" dataKey="vin">
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
@ -86,7 +86,7 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Single&lt;/h3&gt;
&lt;h5&gt;Single&lt;/h3&gt;
&lt;p&gt;In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.&lt;/p&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCar1" selectionMode="single" dataKey="vin"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;

10
src/views/datatable/DataTableSortDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3 class="first">Single Column</h3>
<h5>Single Column</h5>
<DataTable :value="cars">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@ -16,7 +16,7 @@
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<h3>Multiple Columns</h3>
<h5>Multiple Columns</h5>
<DataTable :value="cars" sortMode="multiple">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@ -24,7 +24,7 @@
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<h3>Presort</h3>
<h5>Presort</h5>
<DataTable :value="cars" sortField="year" :sortOrder="-1">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@ -32,7 +32,7 @@
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<h3>Removable Sort</h3>
<h5>Removable Sort</h5>
<DataTable :value="cars" removableSort>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@ -46,7 +46,7 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Single Column&lt;/h3&gt;
&lt;h5&gt;Single Column&lt;/h3&gt;
&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;

4
src/views/datatable/DataTableStateDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Session Storage</h3>
<h5>Session Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
stateStorage="session" stateKey="dt-state-demo-session">
@ -50,7 +50,7 @@
</template>
</DataTable>
<h3>Local Storage</h3>
<h5>Local Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
stateStorage="local" stateKey="dt-state-demo-local">

28
src/views/dataview/DataViewDoc.vue
View File

@ -2,15 +2,15 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import DataView from 'primevue/dataview';
</CodeHighlight>
<h3>PrimeFlex</h3>
<h5>PrimeFlex</h5>
<p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <router-link to="/flexgrid">FlexGrid</router-link> documentation for details.</p>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.</p>
<CodeHighlight lang="js">
<template v-pre>
@ -31,7 +31,7 @@ export default {
</template>
</CodeHighlight>
<h3>Layouts</h3>
<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>
@ -65,20 +65,20 @@ export default {
</template>
</CodeHighlight>
<h3>Sections</h3>
<h5>Sections</h5>
<p>Header and Footer are the two templates that are capable of displaying custom content.</p>
<CodeHighlight>
&lt;template #header&gt;Header Content&lt;/template&gt;
&lt;template #footer&gt;Footer Content&lt;/template&gt;
</CodeHighlight>
<h3>Empty Message</h3>
<h5>Empty Message</h5>
<p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
<CodeHighlight>
&lt;template #empty&gt;No records found.&lt;/template&gt;
</CodeHighlight>
<h3>DataViewLayoutOptions</h3>
<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.
@ -100,7 +100,7 @@ export default {
</template>
</CodeHighlight>
<h3>Paginator</h3>
<h5>Paginator</h5>
<p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
<CodeHighlight>
@ -122,7 +122,7 @@ export default {
</template>
</CodeHighlight>
<h3>Sorting</h3>
<h5>Sorting</h5>
<p><i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
<CodeHighlight>
@ -193,7 +193,7 @@ export default {
</template>
</CodeHighlight>
<h3>Lazy Loading</h3>
<h5>Lazy Loading</h5>
<p>Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend.
Pagination in this case needs to display the logical number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only
need to load the data of the current page.</p>
@ -232,7 +232,7 @@ export default {
</template>
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -338,7 +338,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -362,7 +362,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -400,7 +400,7 @@ export default {
</tbody>
</table>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</div>
</TabPanel>

14
src/views/deferredcontent/DeferredContentDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import DeferredContent from 'primevue/deferredcontent';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>DeferredContent is used as a wrapper element of its content..</p>
<CodeHighlight>
<template v-pre>
@ -22,7 +22,7 @@ import DeferredContent from 'primevue/deferredcontent';
</template>
</CodeHighlight>
<h3>Load Event</h3>
<h5>Load Event</h5>
<p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
<CodeHighlight>
<template v-pre>
@ -37,10 +37,10 @@ import DeferredContent from 'primevue/deferredcontent';
</template>
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Component has no properties.</p>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -60,10 +60,10 @@ import DeferredContent from 'primevue/deferredcontent';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Component does not apply any styling.</p>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

8
src/views/dialog/DialogDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Basic</h3>
<h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
@ -41,7 +41,7 @@
</template>
</Dialog>
<h3>Modal</h3>
<h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Godfather I" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
@ -54,7 +54,7 @@
</template>
</Dialog>
<h3>Maximizable</h3>
<h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Godfather I" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
@ -67,7 +67,7 @@
</template>
</Dialog>
<h3>Position</h3>
<h5>Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />

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

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Dialog from 'primevue/dialog';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the sync operator for two-way binding.</p>
<CodeHighlight>
&lt;Dialog header="Godfather I" :visible.sync="display" &gt;
@ -28,7 +28,7 @@ export default {
}
</CodeHighlight>
<h3>Header and Footer</h3>
<h5>Header and Footer</h5>
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
<CodeHighlight>
&lt;Dialog header="Header Text" footer="Footer Text" :visible.sync="display"&gt;
@ -50,7 +50,7 @@ export default {
&lt;/Dialog&gt;
</CodeHighlight>
<h3>Positioning</h3>
<h5>Positioning</h5>
<p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright"<div class=""></div>
<CodeHighlight>
&lt;Dialog position="top" :visible.sync="display"&gt;
@ -58,7 +58,7 @@ export default {
&lt;/Dialog&gt;
</CodeHighlight>
<h3>Popup Content inside the Dialog</h3>
<h5>Popup Content inside the Dialog</h5>
<p>If the dialog contains components with popup elements such as Dropdown or Calendar, set <i>contentStyle</i> to overflow:visible so that overlays can be displayed outside of the content area.</p>
<CodeHighlight>
&lt;Dialog :visible.sync="display" :contentStyle="{overflow: 'visible'}"&gt;
@ -66,7 +66,7 @@ export default {
&lt;/Dialog&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -160,7 +160,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -185,7 +185,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -224,7 +224,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/dropdown/DropdownDemo.vue
View File

@ -8,13 +8,13 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
<h3>Editable</h3>
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
<template #value="slotProps">
<div class="p-dropdown-car-value" v-if="slotProps.value">

18
src/views/dropdown/DropdownDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Dropdown from 'primevue/dropdown';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Dropdown requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
<CodeHighlight>
&lt;Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
@ -28,17 +28,17 @@ data() {
}
</CodeHighlight>
<h3>Placeholder</h3>
<h5>Placeholder</h5>
<p>Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.</p>
<h3>Filtering</h3>
<h5>Filtering</h5>
<p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property.</p>
<CodeHighlight>
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/&gt;
</CodeHighlight>
<h3>Custom Content</h3>
<h5>Custom Content</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.</p>
<p>In addition the <i>value</i> template can be used to customize the selected value.</p>
<CodeHighlight>
@ -63,7 +63,7 @@ data() {
</template>
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -188,7 +188,7 @@ data() {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -234,7 +234,7 @@ data() {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -289,7 +289,7 @@ data() {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/editor/EditorDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3 class="first">Default</h3>
<h5>Default</h5>
<Editor v-model="value1" editorStyle="height: 320px"/>
<h3>Customized</h3>
<h5>Customized</h5>
<Editor v-model="value2" editorStyle="height: 320px">
<template slot="toolbar">
<span class="ql-formats">

14
src/views/editor/EditorDoc.vue
View File

@ -2,18 +2,18 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Editor from 'primevue/editor';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight>
&lt;Editor v-model="value" editorStyle="height: 320px"/&gt;
</CodeHighlight>
<h3>Toolbar</h3>
<h5>Toolbar</h5>
<p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
<CodeHighlight>
&lt;Editor v-model="value" editorStyle="height: 320px"&gt;
@ -27,7 +27,7 @@ import Editor from 'primevue/editor';
&lt;/Editor&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -73,7 +73,7 @@ import Editor from 'primevue/editor';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -103,7 +103,7 @@ import Editor from 'primevue/editor';
<p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -130,7 +130,7 @@ import Editor from 'primevue/editor';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
<p>Resources of quill needs to be added to your application.</p>
<CodeHighlight>

6
src/views/elevation/ElevationDoc.vue
View File

@ -2,20 +2,20 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
<CodeHighlight>
&lt;div class="p-shadow-1" /&gt;
</CodeHighlight>
<h3>Levels</h3>
<h5>Levels</h5>
<p>There are 24 depths available varying from 1 to 24.</p>
<CodeHighlight>
&lt;div class="p-shadow-1" /&gt;
&lt;div class="p-shadow-24" /&gt;
</CodeHighlight>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/fieldset/FieldsetDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3 class="first">Regular</h3>
<h5>Regular</h5>
<Fieldset legend="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@ -16,7 +16,7 @@
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Fieldset>
<h3>Toggleable</h3>
<h5>Toggleable</h5>
<Fieldset legend="Godfather I" :toggleable="true">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.

16
src/views/fieldset/FieldsetDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Fieldset from 'primevue/fieldset';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Fieldset is a container component that accepts content as its children.</p>
<CodeHighlight>
&lt;Fieldset legend="Godfather I"&gt;
@ -18,7 +18,7 @@ import Fieldset from 'primevue/fieldset';
&lt;/Fieldset&gt;
</CodeHighlight>
<h3>Custom Header</h3>
<h5>Custom Header</h5>
<p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
<CodeHighlight>
&lt;Fieldset&gt;
@ -30,7 +30,7 @@ import Fieldset from 'primevue/fieldset';
</CodeHighlight>
<h3>Toggleable</h3>
<h5>Toggleable</h5>
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
<CodeHighlight>
&lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
@ -56,7 +56,7 @@ import Fieldset from 'primevue/fieldset';
&lt;/Fieldset&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -91,7 +91,7 @@ import Fieldset from 'primevue/fieldset';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -113,7 +113,7 @@ import Fieldset from 'primevue/fieldset';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -144,7 +144,7 @@ import Fieldset from 'primevue/fieldset';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/fileupload/FileUploadDemo.vue
View File

@ -8,17 +8,17 @@
</div>
<div class="content-section implementation">
<h3>Advanced</h3>
<h5>Advanced</h5>
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
<h3>Basic</h3>
<h5>Basic</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<h3>Basic with Auto</h3>
<h5>Basic with Auto</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>

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

@ -2,45 +2,45 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import FileUpload from 'primevue/fileupload';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
<CodeHighlight>
&lt;FileUpload name="demo[]" url="./upload" /&gt;
</CodeHighlight>
<h3>Multiple Uploads</h3>
<h5>Multiple Uploads</h5>
<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
<CodeHighlight>
&lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
</CodeHighlight>
<h3>Basic UI</h3>
<h5>Basic UI</h5>
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<CodeHighlight>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
</CodeHighlight>
<h3>DragDrop</h3>
<h5>DragDrop</h5>
<p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
<h3>Auto Uploads</h3>
<h5>Auto Uploads</h5>
<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
<CodeHighlight>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
</CodeHighlight>
<h3>File Types</h3>
<h5>File Types</h5>
<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
<CodeHighlight>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
</CodeHighlight>
<h3>File Size</h3>
<h5>File Size</h5>
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes.</p>
<CodeHighlight>
&lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" /&gt;
@ -53,10 +53,10 @@ import FileUpload from 'primevue/fileupload';
</li>
</ul>
<h3>Request Customization</h3>
<h5>Request Customization</h5>
<p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
<h3>Empty Template</h3>
<h5>Empty Template</h5>
<p>When there is no file selected, you may use the empty slot to display content.</p>
<CodeHighlight>
&lt;FileUpload name="demo[]" url="./upload" /&gt;
@ -66,7 +66,7 @@ import FileUpload from 'primevue/fileupload';
&lt;/FileUpload&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -166,7 +166,7 @@ import FileUpload from 'primevue/fileupload';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div classe="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -224,7 +224,7 @@ import FileUpload from 'primevue/fileupload';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -251,7 +251,7 @@ import FileUpload from 'primevue/fileupload';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

54
src/views/flexgrid/FlexGridDemo.vue
View File

@ -1,15 +1,11 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<div class="content-section implementation flexgrid-demo">
<h1>FlexGrid</h1>
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
Flex Grid CSS is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>, a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
</div>
</div>
<div class="content-section implementation flexgrid-demo">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<div class="p-grid">
<div class="p-col">
<div class="box">1</div>
@ -22,7 +18,7 @@
</div>
</div>
<h3>Dynamic</h3>
<h5>Dynamic</h5>
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
@ -34,7 +30,7 @@
</transition-group>
</div>
<h3>Reverse Direction</h3>
<h5>Reverse Direction</h5>
<div class="p-grid p-dir-rev">
<div class="p-col">
<div class="box">1</div>
@ -47,7 +43,7 @@
</div>
</div>
<h3>Column Direction</h3>
<h5>Column Direction</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<div class="box">1</div>
@ -60,7 +56,7 @@
</div>
</div>
<h3>Reverse Column Direction</h3>
<h5>Reverse Column Direction</h5>
<div class="p-grid p-dir-col-rev">
<div class="p-col">
<div class="box">1</div>
@ -73,7 +69,7 @@
</div>
</div>
<h3>12 Column Grid</h3>
<h5>12 Column Grid</h5>
<div class="p-grid">
<div class="p-col-4">
<div class="box">4</div>
@ -128,7 +124,7 @@
</div>
</div>
<h3>MultiLine</h3>
<h5>MultiLine</h5>
<div class="p-grid">
<div class="p-col-6">
<div class="box">6</div>
@ -144,7 +140,7 @@
</div>
</div>
<h3>Fixed Width Column</h3>
<h5>Fixed Width Column</h5>
<div class="p-grid">
<div class="p-col-fixed" style="width:100px">
<div class="box">100px</div>
@ -154,7 +150,7 @@
</div>
</div>
<h3>Responsive</h3>
<h5>Responsive</h5>
<div class="p-grid">
<div class="p-col-12 p-md-6 p-lg-3">
<div class="box">p-col-12 p-md-6 p-lg-3</div>
@ -170,7 +166,7 @@
</div>
</div>
<h3>Horizontal Alignment - Start</h3>
<h5>Horizontal Alignment - Start</h5>
<div class="p-grid p-justify-start">
<div class="p-col-2">
<div class="box">2</div>
@ -183,7 +179,7 @@
</div>
</div>
<h3>Horizontal Alignment - End</h3>
<h5>Horizontal Alignment - End</h5>
<div class="p-grid p-justify-end">
<div class="p-col-2">
<div class="box">2</div>
@ -196,7 +192,7 @@
</div>
</div>
<h3>Horizontal Alignment - Center</h3>
<h5>Horizontal Alignment - Center</h5>
<div class="p-grid p-justify-center">
<div class="p-col-2">
<div class="box">2</div>
@ -209,7 +205,7 @@
</div>
</div>
<h3>Horizontal Alignment - Between</h3>
<h5>Horizontal Alignment - Between</h5>
<div class="p-grid p-justify-between">
<div class="p-col-2">
<div class="box">2</div>
@ -222,7 +218,7 @@
</div>
</div>
<h3>Horizontal Alignment - Around</h3>
<h5>Horizontal Alignment - Around</h5>
<div class="p-grid p-justify-around">
<div class="p-col-2">
<div class="box">2</div>
@ -235,7 +231,7 @@
</div>
</div>
<h3>Horizontal Alignment - Even</h3>
<h5>Horizontal Alignment - Even</h5>
<div class="p-grid p-justify-even">
<div class="p-col-2">
<div class="box">2</div>
@ -248,7 +244,7 @@
</div>
</div>
<h3>Vertical Alignment - Start</h3>
<h5>Vertical Alignment - Start</h5>
<div class="p-grid p-align-start vertical-container">
<div class="p-col">
<div class="box">4</div>
@ -261,7 +257,7 @@
</div>
</div>
<h3>Vertical Alignment - End</h3>
<h5>Vertical Alignment - End</h5>
<div class="p-grid p-align-end vertical-container">
<div class="p-col">
<div class="box">4</div>
@ -274,7 +270,7 @@
</div>
</div>
<h3>Vertical Alignment - Center</h3>
<h5>Vertical Alignment - Center</h5>
<div class="p-grid p-align-center vertical-container">
<div class="p-col">
<div class="box">4</div>
@ -287,7 +283,7 @@
</div>
</div>
<h3>Vertical Alignment - Stretch</h3>
<h5>Vertical Alignment - Stretch</h5>
<div class="p-grid p-align-stretch vertical-container">
<div class="p-col">
<div class="box box-stretched">4</div>
@ -300,7 +296,7 @@
</div>
</div>
<h3>Vertical Alignment - Per Column</h3>
<h5>Vertical Alignment - Per Column</h5>
<div class="p-grid vertical-container">
<div class="p-col p-col-align-start">
<div class="box">4</div>
@ -313,7 +309,7 @@
</div>
</div>
<h3>Offset</h3>
<h5>Offset</h5>
<div class="p-grid">
<div class="p-col-6 p-offset-3">
<div class="box">6</div>
@ -329,7 +325,7 @@
</div>
</div>
<h3>Nested</h3>
<h5>Nested</h5>
<div class="p-grid nested-grid">
<div class="p-col-8">
<div class="p-grid">
@ -349,7 +345,7 @@
</div>
</div>
<h3>Panels</h3>
<h5>Panels</h5>
<div class="p-grid">
<div class="p-col">
<Panel header="Godfather">
@ -377,7 +373,7 @@
</div>
</div>
<h3>Sample Layout</h3>
<h5>Sample Layout</h5>
<div class="p-grid sample-layout">
<div class="p-col-12 p-md-2">
Menu

26
src/views/flexgrid/FlexGridDoc.vue
View File

@ -2,7 +2,7 @@
<div class="content-section documentation flexgrid-demo">
<TabView>
<TabPanel header="Documentation">
<h3>Install</h3>
<h5>Install</h5>
<p>PrimeFlex is available at npm, if you have an existing application run the following command to download it to your project.</p>
<CodeHighlight lang="js">
npm install primeflex --save
@ -14,7 +14,7 @@ import 'primeflex/primeflex.css';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
<CodeHighlight>
@ -37,7 +37,7 @@ import 'primeflex/primeflex.css';
</div>
</div>
<h3>Direction</h3>
<h5>Direction</h5>
<p>Default direction is <b>row</b> and <i>p-dir-*</i> class at the container defines the other possible directions which can be <b>row reverse</b>, <b>column</b> and <b>column reverse</b></p>
<CodeHighlight>
<!-- Row Reverse -->
@ -97,7 +97,7 @@ import 'primeflex/primeflex.css';
<div class="box">3</div>
</div>
</div>
<h3>12 Column Grid</h3>
<h5>12 Column Grid</h5>
<p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.</p>
<p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
@ -163,7 +163,7 @@ import 'primeflex/primeflex.css';
</div>
</div>
<h3>MultiLine</h3>
<h5>MultiLine</h5>
<p>When the number of columns exceed 12, columns wrap to a new line.</p>
<CodeHighlight>
&lt;div class="p-grid"&gt;
@ -189,7 +189,7 @@ import 'primeflex/primeflex.css';
</div>
</div>
<h3>Fixed Width Column</h3>
<h5>Fixed Width Column</h5>
<p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
<CodeHighlight>
&lt;div class="p-grid"&gt;
@ -206,7 +206,7 @@ import 'primeflex/primeflex.css';
<div class="box">auto</div>
</div>
</div>
<h3>Responsive</h3>
<h5>Responsive</h5>
<p>Responsive layout is achieved by applying breakpoint specific classes to the columns whereas <i>p-col-*</i> define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -272,7 +272,7 @@ import 'primeflex/primeflex.css';
</div>
</div>
<h3>Horizontal Alignment</h3>
<h5>Horizontal Alignment</h5>
<p><i>p-justify-*</i> classes are used on the container element to define the alignment along the main axis.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -330,7 +330,7 @@ import 'primeflex/primeflex.css';
</div>
</div>
<h3>Vertical Alignment</h3>
<h5>Vertical Alignment</h5>
<p><i>p-align-*</i> classes are used on the container element to define the alignment along the cross axis.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -436,7 +436,7 @@ import 'primeflex/primeflex.css';
</div>
</div>
<h3>Offset</h3>
<h5>Offset</h5>
<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
<CodeHighlight>
&lt;div class="p-grid"&gt;
@ -509,7 +509,7 @@ import 'primeflex/primeflex.css';
</table>
</div>
<h3>Nested</h3>
<h5>Nested</h5>
<p>Columns can be nested to create more complex layouts.</p>
<CodeHighlight>
&lt;div class="p-grid nested-grid"&gt;
@ -551,7 +551,7 @@ import 'primeflex/primeflex.css';
</div>
</div>
<h3>Gutter</h3>
<h5>Gutter</h5>
<p>A .5 em padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply
<i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
</p>
@ -563,7 +563,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Customization</h3>
<h5>Customization</h5>
<p>PrimeFlex allows customization of breakpoints and gutters via SASS variables, visit the <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> repository to get access to the primeflex.scss file to build your own customized Grid.</p>
<div class="doc-tablewrapper">

22
src/views/formlayout/FormLayoutDemo.vue
View File

@ -9,7 +9,7 @@
</div>
<div class="content-section implementation">
<h3>Vertical</h3>
<h5>Vertical</h5>
<div class="p-fluid">
<div class="p-field">
<label for="firstname1">Firstname</label>
@ -21,7 +21,7 @@
</div>
</div>
<h3>Vertical and Grid</h3>
<h5>Vertical and Grid</h5>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname2">Firstname</label>
@ -33,7 +33,7 @@
</div>
</div>
<h3>Horizontal and Fixed Width</h3>
<h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col">
@ -47,7 +47,7 @@
</div>
</div>
<h3>Horizontal and Fluid</h3>
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<div class="p-field p-grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
@ -63,7 +63,7 @@
</div>
</div>
<h3>Inline</h3>
<h5>Inline</h5>
<div class="p-formgroup-inline">
<div class="p-field">
<label for="firstname5" class="p-sr-only">Firstname</label>
@ -76,7 +76,7 @@
<Button type="button" label="Submit" />
</div>
<h3>Vertical Checkbox</h3>
<h5>Vertical Checkbox</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label>
@ -86,7 +86,7 @@
<label for="city2">Los Angeles</label>
</div>
<h3>Horizontal Checkbox</h3>
<h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
@ -98,7 +98,7 @@
</div>
</div>
<h3>Vertical RadioButton</h3>
<h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label>
@ -108,7 +108,7 @@
<label for="city6">Los Angeles</label>
</div>
<h3>Horizontal RadioButton</h3>
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
@ -120,14 +120,14 @@
</div>
</div>
<h3>Help Text</h3>
<h5>Help Text</h5>
<div class="p-field p-fluid">
<label for="username">Username</label>
<InputText id="username" type="username" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
<h3>Advanced</h3>
<h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-6">
<label for="firstname6">Firstname</label>

22
src/views/formlayout/FormLayoutDoc.vue
View File

@ -2,7 +2,7 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Install</h3>
<h5>Install</h5>
<p>PrimeFlex is available at npm, if you have an existing application run the following command to download it to your project.</p>
<CodeHighlight lang="js">
npm install primeflex --save
@ -13,7 +13,7 @@ npm install primeflex --save
import 'primeflex/primeflex.css';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
<CodeHighlight>
&lt;div class="p-field"&gt;
@ -22,7 +22,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Vertical Layout</h3>
<h5>Vertical Layout</h5>
<p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> which makes the components use all available width.</p>
<CodeHighlight>
&lt;div class="p-fluid"&gt;
@ -37,7 +37,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Vertical Layout with Grid</h3>
<h5>Vertical Layout with Grid</h5>
<p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
below arranges two fields to be displayed next two each other.</p>
<CodeHighlight>
@ -53,7 +53,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Horizontal and Fixed Width</h3>
<h5>Horizontal and Fixed Width</h5>
<p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
example, label has a fixed width where container of the inputs gets the remaining space.
</p>
@ -72,7 +72,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Horizontal and Fluid</h3>
<h5>Horizontal and Fluid</h5>
<p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
<CodeHighlight>
&lt;div class="p-fluid"&gt;
@ -91,7 +91,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Inline</h3>
<h5>Inline</h5>
<p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
<CodeHighlight>
@ -108,7 +108,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Checkbox and RadioButton</h3>
<h5>Checkbox and RadioButton</h5>
<p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
Examples here demonstrates vertical and horizontal layout alternatives.</p>
<CodeHighlight>
@ -159,7 +159,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Helper text</h3>
<h5>Helper text</h5>
<p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
<CodeHighlight>
&lt;div class="p-field p-fluid"&gt;
@ -169,7 +169,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Advanced Forms</h3>
<h5>Advanced Forms</h5>
<p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
<CodeHighlight>
&lt;div class="p-fluid p-formgrid p-grid"&gt;
@ -200,7 +200,7 @@ import 'primeflex/primeflex.css';
&lt;/div&gt;
</CodeHighlight>
<h3>Customization</h3>
<h5>Customization</h5>
<p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p>
<div class="doc-tablewrapper">

12
src/views/fullcalendar/FullCalendarDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import FullCalendar from 'primevue/fullcalendar';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a> so fullcalendar needs to be included in your project.
For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
<CodeHighlight>
@ -101,7 +101,7 @@ export default {
}
</CodeHighlight>
<h3>Options</h3>
<h5>Options</h5>
<p>FullCalendar has a long list of customization parameters that can be defined with the options property. Example below customizes the plugins, header and editable properties.</p>
<CodeHighlight>
&lt;FullCalendar :events="events" :options="options" /&gt;
@ -139,7 +139,7 @@ export default {
}
</CodeHighlight>
<h3>Callbacks</h3>
<h5>Callbacks</h5>
<p>Callbacks of the FullCalendar such as dateClick are also defined with the options property.</p>
<CodeHighlight lang="js">
export default {
@ -163,7 +163,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -188,7 +188,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p><a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a></p>
</TabPanel>

18
src/views/galleria/GalleriaDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Galleria from 'primevue/galleria';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Galleria requires item template and a value as an array of objects.</p>
<CodeHighlight>
&lt;Galleria :value="images"&gt;
@ -145,7 +145,7 @@ export default {
}
</CodeHighlight>
<h3>Items per page</h3>
<h5>Items per page</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property.</p>
<CodeHighlight>
@ -159,7 +159,7 @@ export default {
&lt;/Galleria&gt;
</CodeHighlight>
<h3>Responsive</h3>
<h5>Responsive</h5>
<p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of
objects whose breakpoint defines the max-width to apply the settings.</p>
@ -191,7 +191,7 @@ responsiveOptions: [
]
</CodeHighlight>
<h3>Header and Footer</h3>
<h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
<CodeHighlight>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
@ -207,7 +207,7 @@ responsiveOptions: [
&lt;/Galleria&gt;
</CodeHighlight>
<h3>Indicators</h3>
<h5>Indicators</h5>
<p>Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further
with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and <i>indicatorsPosition</i> properties.</p>
<CodeHighlight>
@ -218,7 +218,7 @@ responsiveOptions: [
&lt;/Galleria&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -379,7 +379,7 @@ responsiveOptions: [
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -430,7 +430,7 @@ responsiveOptions: [
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/galleria/GalleriaFullScreenDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>With Thumbnails</h3>
<h5>With Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
<template #item="slotProps">
@ -21,7 +21,7 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
<h3>Without Thumbnails</h3>
<h5>Without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
<template #item="slotProps">
@ -34,7 +34,7 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
<h3>Custom Content</h3>
<h5>Custom Content</h5>
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #item="slotProps">

14
src/views/galleria/GalleriaIndicatorDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Indicators with Click Event</h3>
<h5>Indicators with Click Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
@ -16,7 +16,7 @@
</template>
</Galleria>
<h3>Indicators with Hover Event</h3>
<h5>Indicators with Hover Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
@ -24,7 +24,7 @@
</template>
</Galleria>
<h3>Inside Content</h3>
<h5>Inside Content</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps">
@ -32,7 +32,7 @@
</template>
</Galleria>
<h3>Positioned at Top</h3>
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
<template #item="slotProps">
@ -40,7 +40,7 @@
</template>
</Galleria>
<h3>Positioned at Left</h3>
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
@ -48,7 +48,7 @@
</template>
</Galleria>
<h3>Positioned at Right</h3>
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
<template #item="slotProps">
@ -56,7 +56,7 @@
</template>
</Galleria>
<h3>Indicator Template</h3>
<h5>Indicator Template</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">

8
src/views/galleria/GalleriaNavigatorDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Item Navigators and Thumbnails</h3>
<h5>Item Navigators and Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true">
<template #item="slotProps">
@ -19,7 +19,7 @@
</template>
</Galleria>
<h3>Item Navigators without Thumbnails</h3>
<h5>Item Navigators without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
@ -30,7 +30,7 @@
</template>
</Galleria>
<h3>Item Navigators on Hover</h3>
<h5>Item Navigators on Hover</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
@ -41,7 +41,7 @@
</template>
</Galleria>
<h3>Item Navigators and Indicators</h3>
<h5>Item Navigators and Indicators</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps">

8
src/views/galleria/GalleriaThumbnailDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Positioned at Bottom</h3>
<h5>Positioned at Bottom</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@ -18,7 +18,7 @@
</template>
</Galleria>
<h3>Positioned at Left</h3>
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@ -30,7 +30,7 @@
</template>
</Galleria>
<h3>Positioned at Right</h3>
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@ -42,7 +42,7 @@
</template>
</Galleria>
<h3>Positioned at Top</h3>
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />

16
src/views/icons/Icons.vue
View File

@ -1,21 +1,17 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<div class="content-section documentation">
<h1>Icons</h1>
<p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr">PrimeTek</a>.</p>
</div>
</div>
<div class="content-section documentation">
<h3 style="margin-top: 0">Download</h3>
<h5>Download</h5>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<CodeHighlight lang="js">
npm install primeicons --save
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
@ -27,7 +23,7 @@ npm install primeicons --save
<i class="pi pi-check" style="margin-right: .5rem"></i>
<i class="pi pi-times"></i>
<h3>Size</h3>
<h5>Size</h5>
<p>Size of the icons can easily be changed using font-size property.</p>
<CodeHighlight>
@ -42,7 +38,7 @@ npm install primeicons --save
<i class="pi pi-check" style="fontSize: 2rem"></i>
<h3>Spinning Animation</h3>
<h5>Spinning Animation</h5>
<p>Special pi-spin class applies continuous rotation to an icon.</p>
<CodeHighlight>
&lt;i class="pi pi-spin pi-spinner" style="fontSize: 2rem"&gt;&lt;/i&gt;
@ -50,7 +46,7 @@ npm install primeicons --save
<i class="pi pi-spin pi-spinner" style="fontSize: 2rem"></i>
<h3>List of Icons</h3>
<h5>List of Icons</h5>
<p>Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
<InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />

6
src/views/inplace/InplaceDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Input</h3>
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
@ -18,7 +18,7 @@
</template>
</Inplace>
<h3>Image</h3>
<h5>Image</h5>
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
@ -29,7 +29,7 @@
</template>
</Inplace>
<h3>Lazy Data</h3>
<h5>Lazy Data</h5>
<Inplace @open="loadData">
<template #display>
View Data

16
src/views/inplace/InplaceDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Inplace from 'primevue/inplace';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Inplace requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
<CodeHighlight>
@ -24,7 +24,7 @@ import Inplace from 'primevue/inplace';
</template>
</CodeHighlight>
<h3>Closable</h3>
<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>
<CodeHighlight>
<template v-pre>
@ -39,7 +39,7 @@ import Inplace from 'primevue/inplace';
</template>
</CodeHighlight>
<h3>Lazy Data</h3>
<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>
<CodeHighlight>
<template v-pre>
@ -80,7 +80,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -109,7 +109,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -134,7 +134,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -161,7 +161,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

8
src/views/inputgroup/InputGroupDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3 class="first">Addons</h3>
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
@ -35,7 +35,7 @@
</div>
</div>
<h3>Multiple Addons</h3>
<h5>Multiple Addons</h5>
<div class="p-grid">
<div class="p-col-12">
<div class="p-inputgroup">
@ -52,7 +52,7 @@
</div>
</div>
<h3>Button Addons</h3>
<h5>Button Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
@ -77,7 +77,7 @@
</div>
</div>
<h3>Checkbox and RadioButton</h3>
<h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">

18
src/views/inputmask/InputMaskDoc.vue
View File

@ -2,18 +2,18 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import InputMask from 'primevue/inputmask';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight>
&lt;InputMask v-model="value" mask="99-999999" /&gt;
</CodeHighlight>
<h3>Mask</h3>
<h5>Mask</h5>
<p>Mask format can be a combination of the the following built-in definitions.</p>
<ul>
@ -31,12 +31,12 @@ import InputMask from 'primevue/inputmask';
&lt;InputMask v-model="value" mask="a*-999-a999" /&gt;
</CodeHighlight>
<h3>SlotChar</h3>
<h5>SlotChar</h5>
<p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
<CodeHighlight>
&lt;InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
</CodeHighlight>
<h3>Optional Values</h3>
<h5>Optional Values</h5>
<p>If the input does not complete the mask definition, it is cleared by default.
Use <i>autoClear</i> property to control this behavior. In addition, certain part of
a mask can be made optional by using ? symbol where anything after the question
@ -45,7 +45,7 @@ import InputMask from 'primevue/inputmask';
&lt;InputMask v-model="value" mask="(999) 999-9999? x99999" /&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element. In addition;</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -86,10 +86,10 @@ import InputMask from 'primevue/inputmask';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -108,7 +108,7 @@ import InputMask from 'primevue/inputmask';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

8
src/views/inputnumber/InputNumberDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Numerals</h3>
<h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-3">
<label for="integeronly">Integer Only</label>
@ -45,7 +45,7 @@
</div>
</div>
<h3>Currency</h3>
<h5>Currency</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="currency-us">United States</label>
@ -65,7 +65,7 @@
</div>
</div>
<h3>Prefix and Suffix</h3>
<h5>Prefix and Suffix</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="mile">Mile</label>
@ -85,7 +85,7 @@
</div>
</div>
<h3>Buttons</h3>
<h5>Buttons</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="stacked">Stacked</label>

24
src/views/inputnumber/InputNumberDoc.vue
View File

@ -2,19 +2,19 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import InputNumber from 'primevue/inputnumber';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>InputNumber is used with the standard v-model directive. Component always provides a number type although formatting on the input is a string.</p>
<CodeHighlight>
&lt;InputNumber v-model="value" /&gt;
</CodeHighlight>
<h3>Decimal Mode</h3>
<h5>Decimal Mode</h5>
<p>Format is defined using the <i>mode</i> property, "decimal" is the default value allowing only integers when there is no other configuration.</p>
<CodeHighlight>
&lt;InputNumber v-model="value" mode="decimal" /&gt;
@ -41,7 +41,7 @@ Indian Locale
&lt;InputNumber v-model="value4" mode="decimal" locale="en-IN" :minFractionDigits="2" /&gt;
</CodeHighlight>
<h3>Currency</h3>
<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>
<CodeHighlight>
@ -58,7 +58,7 @@ Japan
&lt;InputNumber v-model="value4" mode="currency" currency="JPY" locale="jp-JP" /&gt;
</CodeHighlight>
<h3>Prefix and Suffix</h3>
<h5>Prefix and Suffix</h5>
<p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
<CodeHighlight>
Mile
@ -74,7 +74,7 @@ Temperature
&lt;InputNumber v-model="value4" prefix="&uarr; " suffix="℃" :min="0" :max="40" /&gt;
</CodeHighlight>
<h3>Buttons</h3>
<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.</p>
<CodeHighlight>
@ -90,21 +90,21 @@ Vertical
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /&gt;
</CodeHighlight>
<h3>Step</h3>
<h5>Step</h5>
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<CodeHighlight>
&lt;InputNumber v-model="value" :step="0.25" /&gt;
</CodeHighlight>
<h3>Min and Max Boundaries</h3>
<h5>Min and Max Boundaries</h5>
<p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
<CodeHighlight>
&lt;InputNumber v-model="value" :min="0" :max="100" /&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>InputNumber passes any valid attribute to the underlying input element.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -256,10 +256,10 @@ Vertical
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -310,7 +310,7 @@ Vertical
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/inputswitch/InputSwitchDemo.vue
View File

@ -9,11 +9,11 @@
<div class="content-section implementation">
<div class="card">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<InputSwitch v-model="checked1" />
<p style="font-weight: bold">{{checked1}}</p>
<h3>Preselection</h3>
<h5>Preselection</h5>
<InputSwitch v-model="checked2" />
<p style="font-weight: bold">{{checked2}}</p>
</div>

12
src/views/inputswitch/InputSwitchDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import InputSwitch from 'primevue/inputswitch';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
<CodeHighlight>
&lt;InputSwitch v-model="checked" /&gt;
@ -35,7 +35,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -82,7 +82,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -122,7 +122,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -149,7 +149,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

14
src/views/inputtext/InputTextDemo.vue
View File

@ -8,35 +8,35 @@
</div>
<div class="content-section implementation">
<h3>Basic</h3>
<h5>Basic</h5>
<InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
<h3>Floating Label</h3>
<h5>Floating Label</h5>
<span class="p-float-label">
<InputText id="username" type="text" v-model="value2" />
<label for="username">Username</label>
</span>
<h3>Left Icon</h3>
<h5>Left Icon</h5>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" v-model="value3" placeholder="Search" />
</span>
<h3>Right Icon</h3>
<h5>Right Icon</h5>
<span class="p-input-icon-right">
<i class="pi pi-spin pi-spinner" />
<InputText type="text" v-model="value4" />
</span>
<h3>Disabled</h3>
<h5>Disabled</h5>
<InputText type="text" v-model="value5" disabled />
<h3>Invalid</h3>
<h5>Invalid</h5>
<InputText type="text" class="p-invalid" />
<h3>Sizes</h3>
<h5>Sizes</h5>
<div class="sizes">
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />

20
src/views/inputtext/InputTextDoc.vue
View File

@ -2,18 +2,18 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import InputText from 'primevue/inputtext';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight>
&lt;InputText type="text" v-model="value" /&gt;
</CodeHighlight>
<h3>Float Label</h3>
<h5>Float Label</h5>
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
<CodeHighlight>
&lt;span class="p-float-label"&gt;
@ -22,7 +22,7 @@ import InputText from 'primevue/inputtext';
&lt;/span&gt;
</CodeHighlight>
<h3>Icons</h3>
<h5>Icons</h5>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
or <i>p-input-icon-left</i> class depending on the icon location.</p>
<CodeHighlight>
@ -37,7 +37,7 @@ import InputText from 'primevue/inputtext';
&lt;/span&gt;
</CodeHighlight>
<h3>Sizes</h3>
<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 should be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
<CodeHighlight>
@ -46,13 +46,13 @@ import InputText from 'primevue/inputtext';
&lt;InputText type="text" class="p-inputtext-lg" placeholder="Large" /&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element.</p>
<h3>Events</h3>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -79,7 +79,7 @@ import InputText from 'primevue/inputtext';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
@ -89,7 +89,7 @@ import InputText from 'primevue/inputtext';
</a>
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;h5&gt;Basic&lt;/h3&gt;
&lt;InputText type="text" v-model="value1" /&gt;
&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;

4
src/views/listbox/ListboxDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3 class="first">Single</h3>
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
<template #option="slotProps">
<div class="car-item">

18
src/views/listbox/ListboxDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Listbox from 'primevue/listbox';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
<CodeHighlight>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
@ -28,7 +28,7 @@ data() {
}
</CodeHighlight>
<h3>Selection</h3>
<h5>Selection</h5>
<p>Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. 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.</p>
@ -36,7 +36,7 @@ data() {
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/&gt;
</CodeHighlight>
<h3>Custom Content</h3>
<h5>Custom Content</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.</p>
<CodeHighlight>
<template v-pre>
@ -51,13 +51,13 @@ data() {
</template>
</CodeHighlight>
<h3>Filter</h3>
<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.</p>
<CodeHighlight>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -153,7 +153,7 @@ data() {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -179,7 +179,7 @@ data() {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -214,7 +214,7 @@ data() {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/megamenu/MegaMenuDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3>Horizontal</h3>
<h5>Horizontal</h5>
<MegaMenu :model="items" />
<h3>Vertical</h3>
<h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/>
</div>

16
src/views/megamenu/MegaMenuDoc.vue
View File

@ -2,15 +2,15 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import MegaMenu from 'primevue/megamenu';
</CodeHighlight>
<h3>MenuModel</h3>
<h5>MenuModel</h5>
<p>MegaMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Layout of the MegaMenu is managed by the <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> that can be downloaded from npm.</p>
<CodeHighlight lang="js">
npm install primeflex --save
@ -142,13 +142,13 @@ export default {
}
</CodeHighlight>
<h3>Orientation</h3>
<h5>Orientation</h5>
<p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
<CodeHighlight>
&lt;MegaMenu :model="items" orientation="vertical" /&gt;
</CodeHighlight>
<h3>Custom Content</h3>
<h5>Custom Content</h5>
<p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.</p>
<CodeHighlight>
<template v-pre>
@ -159,7 +159,7 @@ export default {
</template>
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -188,7 +188,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -247,7 +247,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/menu/MenuDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3 class="first">Inline</h3>
<h5>Inline</h5>
<Menu :model="items" />
<h3>Overlay</h3>
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div>

18
src/views/menu/MenuDoc.vue
View File

@ -2,15 +2,15 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Menu from 'primevue/menu';
</CodeHighlight>
<h3>MenuModel</h3>
<h5>MenuModel</h5>
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Menu requires a collection of menuitems as its model.</p>
<CodeHighlight>
&lt;Menu :model="items" /&gt;
@ -51,7 +51,7 @@ export default {
}
</CodeHighlight>
<h3>SubMenus</h3>
<h5>SubMenus</h5>
<p>Menu supports one level of nesting via subitems of an item.</p>
<CodeHighlight lang="js">
const items: [
@ -68,7 +68,7 @@ const items: [
];
</CodeHighlight>
<h3>Popup Mode</h3>
<h5>Popup Mode</h5>
<p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
<CodeHighlight>
@ -82,7 +82,7 @@ toggle(event) {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -129,7 +129,7 @@ toggle(event) {
</table>
</div>
<h3>Methods</h3>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -160,7 +160,7 @@ toggle(event) {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -195,7 +195,7 @@ toggle(event) {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

14
src/views/menubar/MenubarDoc.vue
View File

@ -2,15 +2,15 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Menubar from 'primevue/menubar';
</CodeHighlight>
<h3>MenuModel</h3>
<h5>MenuModel</h5>
<p>Menubar uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Menubar requires a collection of menuitems as its model.</p>
<CodeHighlight>
&lt;Menubar :model="items" /&gt;
@ -153,7 +153,7 @@ export default {
}
</CodeHighlight>
<h3>Custom Content</h3>
<h5>Custom Content</h5>
<p>Two slots named "start" and "end" are provided to embed content before or after the menubar.</p>
<CodeHighlight>
<template v-pre>
@ -168,7 +168,7 @@ export default {
</template>
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -191,7 +191,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -234,7 +234,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

8
src/views/menumodel/MenuModel.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section documentation">
<h3 style="margin-top:0">MenuItem</h3>
<h5">MenuItem</h5>
<p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
<CodeHighlight lang="js">
const items: [
@ -114,7 +114,7 @@ const items: [
</table>
</div>
<h3>Command</h3>
<h5>Command</h5>
<p>The function to invoke when an item is clicked is defined using the command property.</p>
<CodeHighlight lang="js">
const items = [
@ -129,7 +129,7 @@ const items = [
];
</CodeHighlight>
<h3>Navigation</h3>
<h5>Navigation</h5>
<p>Navigation is specified using <i>url</i> property for external links or using <i>to</i> property for internal routing.</p>
<CodeHighlight lang="js">
const items = [
@ -146,7 +146,7 @@ const items = [
];
</CodeHighlight>
<h3>Visibility</h3>
<h5>Visibility</h5>
<p>It is a common case to hide certain items based on conditions such as user roles, <i>visible</i> property is available
to implement such cases by supporting functions that returns booleans or simple booleans.</p>
<CodeHighlight lang="js">

8
src/views/message/MessageDemo.vue
View File

@ -8,23 +8,23 @@
</div>
<div class="content-section implementation">
<h3 class="first">Severities</h3>
<h5>Severities</h5>
<Message severity="success">Order Submitted</Message>
<Message severity="info">PrimeVue Rocks</Message>
<Message severity="warn">There are unsaved changes</Message>
<Message severity="error">Validation Failed</Message>
<h3>Dynamic</h3>
<h5>Dynamic</h5>
<Button label="Show" @click="addMessages()" />
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
<transition-group name="p-messages" tag="div">
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
</transition-group>
<h3>Auto Dismiss</h3>
<h5>Auto Dismiss</h5>
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
<h3>Validation Message</h3>
<h5>Validation Message</h5>
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
<Label for="username" class="p-sr-only">Username</Label>
<InputText placeholder="Username" class="p-invalid" />

20
src/views/message/MessageDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Message from 'primevue/message';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Message component requires a content to display.</p>
<CodeHighlight>
&lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt;
@ -33,7 +33,7 @@ data() {
}
</CodeHighlight>
<h3>Severities</h3>
<h5>Severities</h5>
<p>There are four possible values for the severity of a message. Default one is "info".</p>
<ul>
@ -43,20 +43,20 @@ data() {
<li>error</li>
</ul>
<h3>Closable</h3>
<h5>Closable</h5>
<p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
<CodeHighlight>
&lt;Message severity="success" :closable="false"&gt;Order Submitted&lt;/Message&gt;
</CodeHighlight>
<h3>Sticky</h3>
<h5>Sticky</h5>
<p>Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message
should be displayed which is 3000 ms by default.</p>
<CodeHighlight>
&lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
</CodeHighlight>
<h3>Inline Message Component</h3>
<h5>Inline Message Component</h5>
<CodeHighlight lang="javascript">
import InlineMessage from 'primevue/inlinemessage';
</CodeHighlight>
@ -68,7 +68,7 @@ import InlineMessage from 'primevue/inlinemessage';
</CodeHighlight>
<h3>Properties of Message</h3>
<h5>Properties of Message</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -108,7 +108,7 @@ import InlineMessage from 'primevue/inlinemessage';
</table>
</div>
<h3>Properties of ValidationMessage</h3>
<h5>Properties of ValidationMessage</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -130,7 +130,7 @@ import InlineMessage from 'primevue/inlinemessage';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<strong>Message</strong>
@ -221,7 +221,7 @@ import InlineMessage from 'primevue/inlinemessage';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/multiselect/MultiSelectDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
<h3>Advanced with Templating and Filtering</h3>
<h5>Advanced with Templating and Filtering</h5>
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" class="multiselect-custom">
<template #value="slotProps">
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">

16
src/views/multiselect/MultiSelectDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import MultiSelect from 'primevue/multiselect';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>MultiSelect requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
<CodeHighlight>
&lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt;
@ -32,7 +32,7 @@ data() {
}
</CodeHighlight>
<h3>Custom Content</h3>
<h5>Custom Content</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.</p>
<p>In addition the <i>value</i> template can be used to customize the selected values display instead of the default comma separated list.</p>
<CodeHighlight>
@ -57,13 +57,13 @@ data() {
</template>
</CodeHighlight>
<h3>Filter</h3>
<h5>Filter</h5>
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable the <i>filter</i> property.</p>
<CodeHighlight>
&lt;MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -176,7 +176,7 @@ data() {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -222,7 +222,7 @@ data() {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -269,7 +269,7 @@ data() {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

16
src/views/orderlist/OrderListDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import OrderList from 'primevue/orderlist';
</CodeHighlight>
<h3>Getting Started</h3>
<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.
@ -31,7 +31,7 @@ import OrderList from 'primevue/orderlist';
</template>
</CodeHighlight>
<h3>Selection</h3>
<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 sync operator 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>
@ -57,10 +57,10 @@ import OrderList from 'primevue/orderlist';
</template>
</CodeHighlight>
<h3>DataKey</h3>
<h5>DataKey</h5>
<p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -110,7 +110,7 @@ import OrderList from 'primevue/orderlist';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -133,7 +133,7 @@ import OrderList from 'primevue/orderlist';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -160,7 +160,7 @@ import OrderList from 'primevue/orderlist';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/organizationchart/OrganizationChartDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Advanced</h3>
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
<template #person="slotProps">
@ -23,7 +23,7 @@
</template>
</OrganizationChart>
<h3>Basic</h3>
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>

20
src/views/organizationchart/OrganizationChartDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import OrganizationChart from 'primevue/organizationchart';
</CodeHighlight>
<h3>Getting Started</h3>
<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>
<CodeHighlight>
<template v-pre>
@ -62,7 +62,7 @@ export default {
}
</CodeHighlight>
<h3>OrganizationChartNode</h3>
<h5>OrganizationChartNode</h5>
<p>API of the OrganizationChartNode has the properties below.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -121,7 +121,7 @@ export default {
</table>
</div>
<h3>Collapsible Nodes</h3>
<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.
</p>
@ -184,7 +184,7 @@ export default {
}
</CodeHighlight>
<h3>Selection</h3>
<h5>Selection</h5>
<p>Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the sync operator. Note that
selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
<CodeHighlight>
@ -241,7 +241,7 @@ export default {
}
</CodeHighlight>
<h3>Templating</h3>
<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>
<CodeHighlight>
@ -350,7 +350,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -397,7 +397,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -432,7 +432,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -475,7 +475,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

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

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import OverlayPanel from 'primevue/overlaypanel';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
<CodeHighlight>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
@ -23,7 +23,7 @@ toggle(event) {
}
</CodeHighlight>
<h3>Dismissable and CloseIcon</h3>
<h5>Dismissable and CloseIcon</h5>
<p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior.
Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
<CodeHighlight>
@ -32,7 +32,7 @@ toggle(event) {
&lt;/OverlayPanel&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -84,7 +84,7 @@ toggle(event) {
</table>
</div>
<h3>Methods</h3>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -115,7 +115,7 @@ toggle(event) {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -142,7 +142,7 @@ toggle(event) {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/paginator/PaginatorDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3>Basic</h3>
<h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
<h3>Custom</h3>
<h5>Custom</h5>
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
<template #left>

24
src/views/paginator/PaginatorDoc.vue
View File

@ -2,18 +2,18 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Paginator from 'primevue/paginator';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
<CodeHighlight>
&lt;Paginator :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>Start Index</h3>
<h5>Start Index</h5>
<p><i>first</i> property defines the index of the first item displayed by the paginator.</p>
<CodeHighlight>
@ -25,7 +25,7 @@ import Paginator from 'primevue/paginator';
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>Rows Per Page</h3>
<h5>Rows Per Page</h5>
<p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
<CodeHighlight>
&lt;Paginator :first.sync="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
@ -37,7 +37,7 @@ import Paginator from 'primevue/paginator';
&lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>Template</h3>
<h5>Template</h5>
<p>Paginator elements can be customized using the template 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>
@ -52,7 +52,7 @@ import Paginator from 'primevue/paginator';
<li>CurrentPageReport</li>
</ul>
<h3>CurrentPageReport</h3>
<h5>CurrentPageReport</h5>
<p>Current page report item in the template displays information about the pagination state. Default value is (&#123;currentPage&#125; of &#123;totalPages&#125;)
whereas available placeholders are the following;
</p>
@ -65,7 +65,7 @@ import Paginator from 'primevue/paginator';
<li>&#123;totalRecords&#125;</li>
</ul>
<h3>Custom Content</h3>
<h5>Custom Content</h5>
<p>There are two templates available named "left" and "right" 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>
@ -84,7 +84,7 @@ import Paginator from 'primevue/paginator';
</template>
</CodeHighlight>
<h3>Page Change Event</h3>
<h5>Page Change Event</h5>
<p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
<CodeHighlight>
&lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt;
@ -99,7 +99,7 @@ onPage(event) {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -165,7 +165,7 @@ onPage(event) {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -189,7 +189,7 @@ onPage(event) {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -235,7 +235,7 @@ onPage(event) {
</tbody>
</table>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</div>
</TabPanel>

12
src/views/panelmenu/PanelMenuDoc.vue
View File

@ -2,15 +2,15 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import PanelMenu from 'primevue/panelmenu';
</CodeHighlight>
<h3>MenuModel</h3>
<h5>MenuModel</h5>
<p>PanelMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>PanelMenu requires a collection of menuitems as its model.</p>
<CodeHighlight>
&lt;PanelMenu :model="items" /&gt;
@ -142,7 +142,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -165,7 +165,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -212,7 +212,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

12
src/views/password/PasswordDoc.vue
View File

@ -2,18 +2,18 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Password from 'primevue/password';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight>
&lt;Password v-model="value" /&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -60,10 +60,10 @@ import Password from 'primevue/password';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -90,7 +90,7 @@ import Password from 'primevue/password';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

18
src/views/picklist/PickListDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import PickList from 'primevue/picklist';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content
that gets the <i>item</i> instance and the <i>index</i> via slotProps.</p>
<CodeHighlight>
@ -26,7 +26,7 @@ import PickList from 'primevue/picklist';
</template>
</CodeHighlight>
<h3>Templates</h3>
<h5>Templates</h5>
<p>In addition to the mandatory "item" template, picklist provides "sourceHeader" and "targetHeader" slots as optional templates.</p>
<CodeHighlight>
<template v-pre>
@ -50,7 +50,7 @@ import PickList from 'primevue/picklist';
</template>
</CodeHighlight>
<h3>Selection</h3>
<h5>Selection</h5>
<p>In case you need to access the selected items in the list, define a binding to the <i>selection</i> property with the sync operator 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>
@ -71,10 +71,10 @@ import PickList from 'primevue/picklist';
</template>
</CodeHighlight>
<h3>DataKey</h3>
<h5>DataKey</h5>
<p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -124,7 +124,7 @@ import PickList from 'primevue/picklist';
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -176,7 +176,7 @@ import PickList from 'primevue/picklist';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -219,7 +219,7 @@ import PickList from 'primevue/picklist';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

6
src/views/progressbar/ProgressBarDemo.vue
View File

@ -8,13 +8,13 @@
</div>
<div class="content-section implementation">
<h3 class="first">Dynamic</h3>
<h5>Dynamic</h5>
<ProgressBar :value="value1" />
<h3>Static</h3>
<h5>Static</h5>
<ProgressBar :value="value2" :showValue="false" />
<h3>Indeterminate</h3>
<h5>Indeterminate</h5>
<ProgressBar mode="indeterminate" style="height: .5em" />
</div>

10
src/views/progressbar/ProgressBarDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import ProgressBar from 'primevue/progressbar';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
<CodeHighlight>
&lt;ProgressBar :value="value" /&gt;
@ -25,7 +25,7 @@ data() {
&lt;ProgressBar mode="indeterminate"/&gt;
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -59,7 +59,7 @@ data() {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -94,7 +94,7 @@ data() {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/progressspinner/ProgressSpinnerDemo.vue
View File

@ -8,10 +8,10 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h5>Basic</h5>
<ProgressSpinner />
<h3>Custom</h3>
<h5>Custom</h5>
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
</div>

12
src/views/progressspinner/ProgressSpinnerDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import ProgressSpinner from 'primevue/progressspinner';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>ProgressSpinner is defined using ProgressSpinner element.</p>
<CodeHighlight>
<template v-pre>
@ -15,7 +15,7 @@ import ProgressSpinner from 'primevue/progressspinner';
</template>
</CodeHighlight>
<h3>Colors</h3>
<h5>Colors</h5>
<p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
<CodeHighlight lang="css">
@keyframes ui-progress-spinner-color {
@ -36,7 +36,7 @@ import ProgressSpinner from 'primevue/progressspinner';
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -71,7 +71,7 @@ import ProgressSpinner from 'primevue/progressspinner';
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -98,7 +98,7 @@ import ProgressSpinner from 'primevue/progressspinner';
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

4
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3>Basic</h3>
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1">Chicago</label>
@ -27,7 +27,7 @@
</div>
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
<label :for="theme.key">{{theme.name}}</label>

12
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -2,12 +2,12 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<h5>Import</h5>
<CodeHighlight lang="javascript">
import RadioButton from 'primevue/radiobutton';
</CodeHighlight>
<h3>Getting Started</h3>
<h5>Getting Started</h5>
<p>Two-way value binding is defined using the standard v-model directive.</p>
<CodeHighlight>
&lt;RadioButton inputId="city1" name="city" value="Chicago" v-model="city" /&gt;
@ -33,7 +33,7 @@ export default {
}
</CodeHighlight>
<h3>Properties</h3>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -56,7 +56,7 @@ export default {
</table>
</div>
<h3>Events</h3>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -96,7 +96,7 @@ export default {
</table>
</div>
<h3>Styling</h3>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -127,7 +127,7 @@ export default {
</table>
</div>
<h3>Dependencies</h3>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

8
src/views/rating/RatingDemo.vue
View File

@ -8,16 +8,16 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic {{val1}}</h3>
<h5>Basic {{val1}}</h5>
<Rating v-model="val1" />
<h3>No Cancel {{val2}}</h3>
<h5>No Cancel {{val2}}</h5>
<Rating v-model="val2" :cancel="false" />
<h3>ReadOnly</h3>
<h5>ReadOnly</h5>
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
<h3>Disabled</h3>
<h5>Disabled</h5>
<Rating :value="8" :disabled="true" :stars="10" />
</div>

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