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

Corrected CodeHighlight

pull/496/head
Cagatay Civici 2020-09-24 14:14:55 +03:00
parent a16779a64c
commit 680db0a923
137 changed files with 2995 additions and 1883 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/AppCodeHighlight.js
View File

@ -1,6 +1,6 @@
import Prism from 'prismjs'; import Prism from 'prismjs';
const CodeHighlight2 = { const CodeHighlight = {
beforeMount(el, binding) { beforeMount(el, binding) {
if (binding.modifiers.script) if (binding.modifiers.script)
el.className = 'language-javascript'; el.className = 'language-javascript';
@ -13,4 +13,4 @@ const CodeHighlight2 = {
} }
}; };
export default CodeHighlight2; export default CodeHighlight;

6
src/main.js
View File

@ -76,9 +76,8 @@ import ToggleButton from './components/togglebutton/ToggleButton';
import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox'; import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
import Galleria from './components/galleria/Galleria'; import Galleria from './components/galleria/Galleria';
import CodeHighlight from './views/codehighlight/CodeHighlight';
import AppInputStyleSwitch from './AppInputStyleSwitch'; import AppInputStyleSwitch from './AppInputStyleSwitch';
import CodeHighlight2 from './AppCodeHighlight'; import CodeHighlight from './AppCodeHighlight';
import './assets/styles/primevue.css'; import './assets/styles/primevue.css';
import 'primeflex/primeflex.css'; import 'primeflex/primeflex.css';
@ -104,7 +103,6 @@ app.use(router);
app.directive('tooltip', Tooltip); app.directive('tooltip', Tooltip);
app.directive('ripple', Ripple); app.directive('ripple', Ripple);
app.directive('code', CodeHighlight2);
app.component('Accordion', Accordion); app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab); app.component('AccordionTab', AccordionTab);
@ -177,7 +175,7 @@ app.component('TreeTable', TreeTable);
app.component('TriStateCheckbox', TriStateCheckbox); app.component('TriStateCheckbox', TriStateCheckbox);
app.component('Galleria', Galleria); app.component('Galleria', Galleria);
app.component('CodeHighlight', CodeHighlight);
app.component('AppInputStyleSwitch', AppInputStyleSwitch); app.component('AppInputStyleSwitch', AppInputStyleSwitch);
app.directive('code', CodeHighlight);
app.mount('#app'); app.mount('#app');

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

@ -390,7 +390,6 @@ export default {
</AccordionTab> </AccordionTab>
</Accordion> </Accordion>
</template> </template>
</code></pre> </code></pre>
<pre v-code.script> <pre v-code.script>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import AutoComplete from 'primevue/autocomplete'; import AutoComplete from 'primevue/autocomplete';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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 <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> 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> <pre v-code>
<code>
&lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" /&gt; &lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -31,35 +36,42 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Dropdown</h5> <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 <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. dropdownMode property that takes "blank" or "current" as possible values.
"blank" is the default mode to send a query with an empty string whereas "blank" is the default mode to send a query with an empty string whereas
"current" setting sends a query with the current value of the input.</p> "current" setting sends a query with the current value of the input.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt; &lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt;
</CodeHighlight>
</code></pre>
<h5>Multiple Mode</h5> <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> <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> <pre v-code>
<code>
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt; &lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
</CodeHighlight>
</code></pre>
<h5>Objects</h5> <h5>Objects</h5>
<p>AutoComplete can also work with objects using the <i>field</i> property that defines the label to display <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. 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> Here is an example with a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt; &lt;AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
</CodeHighlight>
</code></pre>
<h5>Templating</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt; &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt; &lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
@ -67,7 +79,7 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/AutoComplete&gt; &lt;/AutoComplete&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <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> <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>
@ -246,8 +258,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/autocomplete" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/autocomplete" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt; &lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
@ -266,9 +278,10 @@ export default {
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt; &lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
&lt;/span&gt; &lt;/span&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CountryService from '../../service/CountryService'; import CountryService from '../../service/CountryService';
export default { export default {
@ -303,7 +316,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -7,16 +7,20 @@
<h5>Numbers</h5> <h5>Numbers</h5>
<p>Use <i>.p-badge</i> class to display numbers inside badges.</p> <p>Use <i>.p-badge</i> class to display numbers inside badges.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;span class="p-badge"&gt;2&lt;/span&gt; &lt;span class="p-badge"&gt;2&lt;/span&gt;
</CodeHighlight>
</code></pre>
<h5>Tags</h5> <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> <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> <pre v-code>
<code>
&lt;span class="p-tag"&gt;New&lt;/span&gt; &lt;span class="p-tag"&gt;New&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded"&gt;New&lt;/span&gt; &lt;span class="p-tag p-tag-rounded"&gt;New&lt;/span&gt;
</CodeHighlight>
</code></pre>
<h5>Severities</h5> <h5>Severities</h5>
<p>Different options are available as severity levels with.</p> <p>Different options are available as severity levels with.</p>
@ -31,7 +35,8 @@
<h5>Positoning</h5> <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> <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> <pre v-code>
<code>
&lt;span class="p-overlay-badge"&gt; &lt;span class="p-overlay-badge"&gt;
&lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt; &lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt; &lt;span class="p-badge"&gt;2&lt;/span&gt;
@ -41,29 +46,36 @@
&lt;Button type="button" label="New" /&gt; &lt;Button type="button" label="New" /&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt; &lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;/span&gt; &lt;/span&gt;
</CodeHighlight>
</code></pre>
<h5>Inline Button Badges</h5> <h5>Inline Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p> <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button type="button" label="Emails" badge="8" /&gt; &lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt; &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
</CodeHighlight>
</code></pre>
<h5>Sizes</h5> <h5>Sizes</h5>
<p>Badge sizes are adjusted with additional classes.</p> <p>Badge sizes are adjusted with additional classes.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;span class="p-badge"&gt;2&lt;/span&gt; &lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-l p-badge-sucess"&gt;4&lt;/span&gt; &lt;span class="p-badge p-badge-l p-badge-sucess"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt; &lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
</CodeHighlight>
</code></pre>
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p> <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;h1&gt;Heading 1 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h1&gt; &lt;h1&gt;Heading 1 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h2&gt; &lt;h2&gt;Heading 2 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h2&gt;
</CodeHighlight>
</code></pre>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
@ -112,8 +124,8 @@
<a href="https://github.com/primefaces/primevue/tree/master/src/views/badge" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/badge" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Numbers&lt;/h3&gt; &lt;h3&gt;Numbers&lt;/h3&gt;
&lt;div class="badges"&gt; &lt;div class="badges"&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt; &lt;span class="p-badge"&gt;2&lt;/span&gt;
@ -163,7 +175,7 @@
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt; &lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,23 +3,28 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import BlockUI from 'primevue/blockui'; import BlockUI from 'primevue/blockui';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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 <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. with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
</p> </p>
<CodeHighlight> <pre v-code>
<code>
&lt;BlockUI :blocked="blockedPanel"&gt; &lt;BlockUI :blocked="blockedPanel"&gt;
&lt;Panel header="Header"&gt; &lt;Panel header="Header"&gt;
Panel Content Panel Content
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/BlockUI&gt; &lt;/BlockUI&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -35,14 +40,17 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Full Screen</h5> <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> <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> <pre v-code>
<code>
&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt; &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -141,7 +149,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/blockui" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/blockui" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<code>
&lt;h3&gt;Document&lt;/h3&gt; &lt;h3&gt;Document&lt;/h3&gt;
&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt; &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
@ -159,9 +168,11 @@ export default {
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt; kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/BlockUI&gt; &lt;/BlockUI&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -185,7 +196,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,20 +3,25 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Breadcrumb from 'primevue/breadcrumb'; import Breadcrumb from 'primevue/breadcrumb';
</CodeHighlight>
</code></pre>
<h5>MenuModel</h5> <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> <p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p> <p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Breadcrumb :home="home" :model="items" /&gt; &lt;Breadcrumb :home="home" :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -31,7 +36,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -101,13 +107,14 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Breadcrumb :home="home" :model="items" /&gt; &lt;Breadcrumb :home="home" :model="items" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -122,7 +129,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,33 +3,43 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Button from 'primevue/button'; import Button from 'primevue/button';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Button is created using the Button element.</p> <p>Button is created using the Button element.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button /&gt; &lt;Button /&gt;
</CodeHighlight>
</code></pre>
<h5>Label</h5> <h5>Label</h5>
<p>Text of the button is defined using the <i>label</i> property.</p> <p>Text of the button is defined using the <i>label</i> property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button label="Submit" /&gt; &lt;Button label="Submit" /&gt;
</CodeHighlight>
</code></pre>
<h5>Icons</h5> <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 <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> icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt; &lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
</CodeHighlight>
</code></pre>
<h5>Events</h5> <h5>Events</h5>
<p>Events are defined with the standard notation.</p> <p>Events are defined with the standard notation.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button label="Submit" @click="handleClick($event)"/&gt; &lt;Button label="Submit" @click="handleClick($event)"/&gt;
</CodeHighlight>
</code></pre>
<h5>Severity</h5> <h5>Severity</h5>
<p>Different options are available as severity levels.</p> <p>Different options are available as severity levels.</p>
@ -43,7 +53,8 @@ import Button from 'primevue/button';
<li>.p-button-danger</li> <li>.p-button-danger</li>
</ul> </ul>
<CodeHighlight> <pre v-code>
<code>
&lt;Button label="Primary" /&gt; &lt;Button label="Primary" /&gt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt; &lt;Button label="Secondary" class="p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-success" /&gt; &lt;Button label="Success" class="p-button-success" /&gt;
@ -51,70 +62,87 @@ import Button from 'primevue/button';
&lt;Button label="Warning" class="p-button-warning" /&gt; &lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Warning" class="p-button-help" /&gt; &lt;Button label="Warning" class="p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt; &lt;Button label="Danger" class="p-button-danger" /&gt;
</CodeHighlight>
</code></pre>
<h5>Text Buttons</h5> <h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> <p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
text buttons ignore severity levels and displayed as a regular text.</p> text buttons ignore severity levels and displayed as a regular text.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button label="Submit" class="p-button-text" /&gt; &lt;Button label="Submit" class="p-button-text" /&gt;
&lt;Button icon="pi pi-check" class="p-button-text" /&gt; &lt;Button icon="pi pi-check" class="p-button-text" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt; &lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" /&gt; &lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" /&gt;
</CodeHighlight>
</code></pre>
<h5>Raised and Rounded Buttons</h5> <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> <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> <pre v-code>
<code>
&lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt; &lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
</CodeHighlight>
</code></pre>
<h5>Outlined Buttons</h5> <h5>Outlined Buttons</h5>
<p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p> <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button label="Primary" class="p-button-outlined" /&gt; &lt;Button label="Primary" class="p-button-outlined" /&gt;
</CodeHighlight>
</code></pre>
<h5>Link Buttons</h5> <h5>Link Buttons</h5>
<p>Use "p-button-link" class to render the button as a link.</p> <p>Use "p-button-link" class to render the button as a link.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button label="Link" class="p-button-link" /&gt; &lt;Button label="Link" class="p-button-link" /&gt;
</CodeHighlight>
</code></pre>
<h5>Badges</h5> <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> <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> <pre v-code>
<code>
&lt;Button type="button" label="Emails" badge="8" /&gt; &lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt; &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
</CodeHighlight>
</code></pre>
<h5>ButtonSet</h5> <h5>ButtonSet</h5>
<p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p> <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;span class="p-buttonset"&gt; &lt;span class="p-buttonset"&gt;
&lt;Button label="Save" icon="pi pi-check" /&gt; &lt;Button label="Save" icon="pi pi-check" /&gt;
&lt;Button label="Delete" icon="pi pi-trash" /&gt; &lt;Button label="Delete" icon="pi pi-trash" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" /&gt; &lt;Button label="Cancel" icon="pi pi-times" /&gt;
&lt;/span&gt; &lt;/span&gt;
</CodeHighlight>
</code></pre>
<h5>Sizes</h5> <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>. <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> 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> <pre v-code>
<code>
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt; &lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt;
&lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt; &lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt;
&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt; &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
</CodeHighlight>
</code></pre>
<h5>Slot</h5> <h5>Slot</h5>
<p>Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p> <p>Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button&gt; &lt;Button&gt;
Custom Content Custom Content
&lt;/Button&gt; &lt;/Button&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <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> <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>
@ -206,8 +234,8 @@ import Button from 'primevue/button';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;Button label="Submit" /&gt; &lt;Button label="Submit" /&gt;
&lt;Button label="Disabled" disabled="disabled" /&gt; &lt;Button label="Disabled" disabled="disabled" /&gt;
@ -320,13 +348,15 @@ import Button from 'primevue/button';
&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt; &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="css"> <pre v-code.css>
<code>
button { button {
margin-right: .5rem; margin-right: .5rem;
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,18 +3,23 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
import Calendar from 'primevue/calendar'; import Calendar from 'primevue/calendar';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Two-way value binding is defined using the standard v-model directive referencing to a Date property.</p> <p>Two-way value binding is defined using the standard v-model directive referencing to a Date property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" /&gt; &lt;Calendar v-model="value" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -22,13 +27,16 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Popup and Inline</h5> <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> <p>Calendar is displayed in a popup by default and <i>inline</i> property needs to be enabled for inline mode.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" :inline="true" /&gt; &lt;Calendar v-model="value" :inline="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>Selection Mode</h5> <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 <p>By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this
@ -36,16 +44,20 @@ export default {
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 Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value
is the end date.</p> is the end date.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" selectionMode="single || multiple || range" /&gt; &lt;Calendar v-model="value" selectionMode="single || multiple || range" /&gt;
</CodeHighlight>
</code></pre>
<h5>DateFormat</h5> <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> <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> <pre v-code>
<code>
&lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt; &lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt;
</CodeHighlight>
</code></pre>
<p>Following options can be a part of the format.</p> <p>Following options can be a part of the format.</p>
<ul> <ul>
@ -72,43 +84,56 @@ export default {
<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 <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. need to use the time picker as standalone, use the <i>timeOnly</i> property.
</p> </p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" :showTime="true" /&gt; &lt;Calendar v-model="value" :showTime="true" /&gt;
&lt;Calendar v-model="value" :showTime="true" hourFormat="12" /&gt; &lt;Calendar v-model="value" :showTime="true" hourFormat="12" /&gt;
&lt;Calendar v-model="value" :showTime="true" :timeOnly="true" /&gt; &lt;Calendar v-model="value" :showTime="true" :timeOnly="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>Date Restriction</h5> <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> <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> and <i>maxDate</i> options.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" /&gt; &lt;Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" /&gt;
</CodeHighlight>
</code></pre>
<p>To disable specific dates or days, restrict selectable dates use <i>disabledDates</i> and/or <i>disabledDays</i> options.</p> <p>To disable specific dates or days, restrict selectable dates use <i>disabledDates</i> and/or <i>disabledDays</i> options.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" /&gt; &lt;Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" /&gt;
</CodeHighlight>
</code></pre>
<h5>Button Bar</h5> <h5>Button Bar</h5>
<p>Button bar displays today and clear buttons and enabled using <i>showButtonBar</i> property.</p> <p>Button bar displays today and clear buttons and enabled using <i>showButtonBar</i> property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" :showButtonBar="true" /&gt; &lt;Calendar v-model="value" :showButtonBar="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>Multiple Months</h5> <h5>Multiple Months</h5>
<p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p> <p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" :numberOfMonths="3" /&gt; &lt;Calendar v-model="value" :numberOfMonths="3" /&gt;
</CodeHighlight>
</code></pre>
<h5>Localization</h5> <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> <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> <pre v-code>
<code>
&lt;Calendar v-model="value" :locale="en" /&gt; &lt;Calendar v-model="value" :locale="en" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -127,24 +152,27 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Custom Content</h5> <h5>Custom Content</h5>
<p>Calendar UI accepts custom content using header and footer templates.</p> <p>Calendar UI accepts custom content using header and footer templates.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value"&gt; &lt;Calendar v-model="value"&gt;
&lt;template #header&gt;Header Content&lt;/template&gt; &lt;template #header&gt;Header Content&lt;/template&gt;
&lt;template #footer&gt;Footer Content&lt;/template&gt; &lt;template #footer&gt;Footer Content&lt;/template&gt;
&lt;/Calendar&gt; &lt;/Calendar&gt;
</CodeHighlight>
</code></pre>
<p>In addition, cell contents can be templated using a template named "date". This is a handy feature to highlight specific dates. Note that the date property of the slot props <p>In addition, cell contents can be templated using a template named "date". This is a handy feature to highlight specific dates. Note that the date property of the slot props
passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below
changes the background color of dates between 10th and 15th of each month.</p> changes the background color of dates between 10th and 15th of each month.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Calendar v-model="value"&gt; &lt;Calendar v-model="value"&gt;
&lt;template #date="slotProps"&gt; &lt;template #date="slotProps"&gt;
&lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt; &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
@ -152,25 +180,31 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Calendar&gt; &lt;/Calendar&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="css"> <pre v-code.css>
<code>
.special-day { .special-day {
text-decoration: line-through; text-decoration: line-through;
} }
</CodeHighlight>
</code></pre>
<h5>Month Picker</h5> <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> <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> <pre v-code>
<code>
&lt;Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt; &lt;Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
</CodeHighlight>
</code></pre>
<h5>Touch UI</h5> <h5>Touch UI</h5>
<p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p> <p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Calendar v-model="value" :touchUI="true" /&gt; &lt;Calendar v-model="value" :touchUI="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <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> <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>
@ -543,8 +577,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/calendar" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/calendar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Popup&lt;/h5&gt; &lt;h5&gt;Popup&lt;/h5&gt;
&lt;div class=" p-fluid p-grid p-formgrid"&gt; &lt;div class=" p-fluid p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt; &lt;div class="p-field p-col-12 p-md-4"&gt;
@ -617,9 +651,10 @@ export default {
&lt;h5&gt;Inline&lt;/h5&gt; &lt;h5&gt;Inline&lt;/h5&gt;
&lt;Calendar v-model="date14" :inline="true" :showWeek="true" /&gt; &lt;Calendar v-model="date14" :inline="true" :showWeek="true" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
created() { created() {
let today = new Date(); let today = new Date();
@ -675,13 +710,16 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.special-day { .special-day {
text-decoration: line-through; text-decoration: line-through;
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>

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

@ -3,21 +3,26 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Card from 'primevue/card'; import Card from 'primevue/card';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Card is used as a container.</p> <p>Card is used as a container.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Card&gt; &lt;Card&gt;
Content Content
&lt;/Card&gt; &lt;/Card&gt;
</CodeHighlight>
</code></pre>
<h5>Templates</h5> <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> <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> <pre v-code>
<code>
&lt;Card&gt; &lt;Card&gt;
&lt;template slot="header"&gt; &lt;template slot="header"&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt; &lt;img alt="user header" src="demo/images/usercard.png"&gt;
@ -34,7 +39,8 @@ import Card from 'primevue/card';
&lt;Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /&gt; &lt;Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Card&gt; &lt;/Card&gt;
</CodeHighlight>
</code></pre>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
@ -79,8 +85,8 @@ import Card from 'primevue/card';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Card style="width: 25rem; margin-bottom: 2em"&gt; &lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
&lt;template slot="title"&gt; &lt;template slot="title"&gt;
Simple Card Simple Card
@ -111,7 +117,7 @@ import Card from 'primevue/card';
&lt;/template&gt; &lt;/template&gt;
&lt;/Card&gt; &lt;/Card&gt;
</template> </template>
</CodeHighlight> </code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,33 +3,39 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Carousel from 'primevue/carousel'; import Carousel from 'primevue/carousel';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p> <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Carousel :value="cars"&gt; &lt;Carousel :value="cars"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</CodeHighlight>
</code></pre>
<h5>Items per page and Scroll Items</h5> <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> <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> <pre v-code>
<code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt; &lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</CodeHighlight>
</code></pre>
<h5>Responsive</h5> <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 <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> objects whose breakpoint defines the max-width to apply the settings.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt; &lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h2&gt;Basic&lt;/h2&gt; &lt;h2&gt;Basic&lt;/h2&gt;
@ -55,8 +61,9 @@ import Carousel from 'primevue/carousel';
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
data() { data() {
return { return {
responsiveOptions: [ responsiveOptions: [
@ -78,12 +85,14 @@ data() {
] ]
} }
}, },
</CodeHighlight>
</code></pre>
<h5>Header and Footer</h5> <h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p> <p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt; &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h2&gt;Custom Header&lt;/h2&gt; &lt;h2&gt;Custom Header&lt;/h2&gt;
@ -95,21 +104,25 @@ data() {
&lt;h2&gt;Custom Footer&lt;/h2&gt; &lt;h2&gt;Custom Footer&lt;/h2&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</CodeHighlight>
</code></pre>
<h5>Orientation</h5> <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> <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> <pre v-code>
<code>
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt; &lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
Content Content
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</CodeHighlight>
</code></pre>
<h5>AutoPlay and Circular</h5> <h5>AutoPlay and Circular</h5>
<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p> <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt; &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h2&gt;Circular, AutoPlay&lt;/h2&gt; &lt;h2&gt;Circular, AutoPlay&lt;/h2&gt;
@ -118,7 +131,8 @@ data() {
Content Content
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -263,8 +277,8 @@ data() {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"&gt; &lt;Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt; &lt;template #header&gt;
@ -346,9 +360,10 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -382,9 +397,11 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9)); this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.product-item { .product-item {
.product-item-content { .product-item-content {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-d);
@ -399,7 +416,8 @@ export default {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -2,8 +2,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Vertical&lt;/h3&gt; &lt;h5&gt;Vertical&lt;/h3&gt;
&lt;Chart type="bar" :data="basicData" /&gt; &lt;Chart type="bar" :data="basicData" /&gt;
@ -16,9 +16,10 @@
&lt;h3&gt;Stacked&lt;/h3&gt; &lt;h3&gt;Stacked&lt;/h3&gt;
&lt;Chart type="bar" :data="stackedData" :options="stackedOptions"/&gt; &lt;Chart type="bar" :data="stackedData" :options="stackedOptions"/&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -161,7 +162,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -5,25 +5,32 @@
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>To begin with, charts.js package needs to be installed in your project.</p> <p>To begin with, charts.js package needs to be installed in your project.</p>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
npm install chart.js --save npm install chart.js --save
</CodeHighlight>
</code></pre>
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Chart from 'primevue/chart'; import Chart from 'primevue/chart';
</CodeHighlight>
</code></pre>
<h5>Chart Types</h5> <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> <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>
<h5>Data</h5> <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> <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> <pre v-code>
<code>
&lt;Chart type="bar" :data="basicData" /&gt; &lt;Chart type="bar" :data="basicData" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -45,16 +52,20 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Options</h5> <h5>Options</h5>
<p>While a series can be customized per dataset, general chart options are defined with options property. <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> 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> <pre v-code>
<code>
&lt;Chart type="line" :data="data" :options="options" /&gt; &lt;Chart type="line" :data="data" :options="options" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
options: { options: {
responsive: true, responsive: true,
hoverMode: 'index', hoverMode: 'index',
@ -77,7 +88,8 @@ options: {
}] }]
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <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> <p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>

12
src/views/chart/ComboChartDoc.vue
View File

@ -2,13 +2,14 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt; &lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -75,7 +76,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/chart/DoughnutChartDoc.vue
View File

@ -2,13 +2,14 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Chart type="doughnut" :data="chartData" /&gt; &lt;Chart type="doughnut" :data="chartData" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -33,7 +34,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/chart/LineChartDoc.vue
View File

@ -2,8 +2,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;Chart type="line" :data="basicData" /&gt; &lt;Chart type="line" :data="basicData" /&gt;
@ -13,9 +13,10 @@
&lt;h3&gt;Line Styles&lt;/h3&gt; &lt;h3&gt;Line Styles&lt;/h3&gt;
&lt;Chart type="line" :data="lineStylesData" /&gt; &lt;Chart type="line" :data="lineStylesData" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -108,7 +109,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/chart/PieChartDoc.vue
View File

@ -2,13 +2,14 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Chart type="pie" :data="chartData" /&gt; &lt;Chart type="pie" :data="chartData" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -33,7 +34,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/chart/PolarAreaChartDoc.vue
View File

@ -2,13 +2,14 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Chart type="polarArea" :data="chartData" /&gt; &lt;Chart type="polarArea" :data="chartData" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -41,7 +42,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/chart/RadarChartDoc.vue
View File

@ -2,13 +2,14 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Chart type="radar" :data="chartData" /&gt; &lt;Chart type="radar" :data="chartData" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -40,7 +41,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,26 +3,33 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Checkbox from 'primevue/checkbox'; import Checkbox from 'primevue/checkbox';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Checkbox v-model="checked" :binary="true" /&gt; &lt;Checkbox v-model="checked" :binary="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>Multiple Values</h5> <h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p> <p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt; &lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
&lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt; &lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
&lt;Checkbox name="city" value="New York" v-model="cities" /&gt; &lt;Checkbox name="city" value="New York" v-model="cities" /&gt;
&lt;Checkbox name="city" value="San Francisco" v-model="cities" /&gt; &lt;Checkbox name="city" value="San Francisco" v-model="cities" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -30,7 +37,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related <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> checkboxes as checked by default.</p>
@ -108,8 +116,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="binary" v-model="checked" :binary="true" /&gt; &lt;Checkbox id="binary" v-model="checked" :binary="true" /&gt;
@ -140,9 +148,10 @@ export default {
&lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt; &lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -156,7 +165,8 @@ export default {
this.selectedCategories = this.categories.slice(1,3); this.selectedCategories = this.categories.slice(1,3);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,20 +3,24 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Chips from 'primevue/chips'; import Chips from 'primevue/chips';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>An array as the value can be bound using the standard v-model directive.</p> <p>An array as the value can be bound using the standard v-model directive.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Chips v-model="value" /&gt; &lt;Chips v-model="value" /&gt;
</CodeHighlight>
</code></pre>
<h5>Custom Content</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Chips v-model="value"&gt; &lt;Chips v-model="value"&gt;
&lt;template #chip="slotProps"&gt; &lt;template #chip="slotProps"&gt;
&lt;div&gt; &lt;div&gt;
@ -26,7 +30,7 @@ import Chips from 'primevue/chips';
&lt;/template&gt; &lt;/template&gt;
&lt;/Chips&gt; &lt;/Chips&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <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> <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>
@ -146,8 +150,8 @@ import Chips from 'primevue/chips';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/chips" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/chips" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;Chips v-model="value1" /&gt; &lt;Chips v-model="value1" /&gt;
@ -164,9 +168,10 @@ import Chips from 'primevue/chips';
&lt;/template&gt; &lt;/template&gt;
&lt;/Chips&gt; &lt;/Chips&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -176,7 +181,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

25
src/views/codehighlight/CodeHighlight.vue
View File

@ -1,25 +0,0 @@
<template>
<pre :class="languageClass" ref="code"><code><slot></slot>
</code></pre>
</template>
<script>
import Prism from 'prismjs';
export default {
props: {
lang: {
type: String,
default: 'markup'
}
},
computed: {
languageClass() {
return 'language-' + this.lang;
}
},
mounted() {
Prism.highlightElement(this.$el.children[0]);
}
};
</script>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ColorPicker from 'primevue/colorpicker'; import ColorPicker from 'primevue/colorpicker';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code>
<code>
&lt;ColorPicker v-model="color" /&gt; &lt;ColorPicker v-model="color" /&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -21,13 +26,16 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Inline and Overlay</h5> <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> <p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;ColorPicker v-model="color" :inline="true" /&gt; &lt;ColorPicker v-model="color" :inline="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -163,17 +171,18 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt; &lt;h3&gt;Inline&lt;/h3&gt;
&lt;ColorPicker v-model="color1" :inline="true" /&gt; &lt;ColorPicker v-model="color1" :inline="true" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt; &lt;h3&gt;Overlay&lt;/h3&gt;
&lt;ColorPicker v-model="color2" /&gt; &lt;ColorPicker v-model="color2" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -182,7 +191,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,9 +3,11 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ContextMenu from 'primevue/contextmenu'; import ContextMenu from 'primevue/contextmenu';
</CodeHighlight>
</code></pre>
<h5>MenuModel</h5> <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> <p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
@ -13,7 +15,8 @@ import ContextMenu from 'primevue/contextmenu';
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>ContextMenu requires a collection of menuitems as its model.</p> <p>ContextMenu requires a collection of menuitems as its model.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -151,23 +154,29 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Document Menu</h5> <h5>Document Menu</h5>
<p>Setting global property attaches the context menu to the document.</p> <p>Setting global property attaches the context menu to the document.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;ContextMenu :global="true" :model="items" /&gt; &lt;ContextMenu :global="true" :model="items" /&gt;
</CodeHighlight>
</code></pre>
<h5>Element Menu</h5> <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> <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt; &lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt; &lt;ContextMenu ref="menu" :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -180,7 +189,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -306,14 +316,15 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt; &lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt; &lt;ContextMenu ref="menu" :model="items" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -456,7 +467,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -21,8 +21,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products"&gt; &lt;DataTable :value="products"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@ -30,9 +30,10 @@
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -49,7 +50,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -61,8 +61,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="sales"&gt; &lt;DataTable :value="sales"&gt;
&lt;ColumnGroup type="header"&gt; &lt;ColumnGroup type="header"&gt;
&lt;Row&gt; &lt;Row&gt;
@ -110,9 +110,10 @@
&lt;/ColumnGroup&gt; &lt;/ColumnGroup&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -157,7 +158,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -33,8 +33,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Fit Mode&lt;/h3&gt; &lt;h3&gt;Fit Mode&lt;/h3&gt;
&lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="fit"&gt; &lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="fit"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
@ -51,9 +51,10 @@
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -70,7 +71,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -25,8 +25,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products"&gt; &lt;DataTable :value="products"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align:left"&gt; &lt;div style="text-align:left"&gt;
@ -38,9 +38,10 @@
&lt;Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"&gt;&lt;/Column&gt; &lt;Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -71,7 +72,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -27,8 +27,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu"&gt; &lt;DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@ -42,9 +42,10 @@
&lt;ContextMenu :model="menuModel" ref="cm" /&gt; &lt;ContextMenu :model="menuModel" ref="cm" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -82,7 +83,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -144,8 +144,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Toolbar class="p-mb-4"&gt; &lt;Toolbar class="p-mb-4"&gt;
&lt;template slot="left"&gt; &lt;template slot="left"&gt;
&lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt; &lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt;
@ -277,9 +277,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -381,7 +382,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,20 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';
import Column from 'primevue/column'; import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup'; //optional for column grouping import ColumnGroup from 'primevue/columngroup'; //optional for column grouping
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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. <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> 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>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import axios from 'axios' import axios from 'axios'
export default class CarService { export default class CarService {
@ -30,10 +33,12 @@ export default class CarService {
return axios.get('demo/data/cars-large.json').then(res => res.data.data); return axios.get('demo/data/cars-large.json').then(res => res.data.data);
} }
} }
</CodeHighlight>
</code></pre>
<p>Example response;</p> <p>Example response;</p>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
{ {
"data": [ "data": [
{"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"}, {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
@ -48,11 +53,12 @@ export default class CarService {
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"} {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
] ]
} }
</CodeHighlight>
</code></pre>
<p>Following sample datatable has 4 columns and retrieves the data from a service on mount.</p> <p>Following sample datatable has 4 columns and retrieves the data from a service on mount.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -60,9 +66,10 @@ export default class CarService {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -79,19 +86,21 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsSmall().then(data => this.cars = data);
} }
} }
</CodeHighlight>
</code></pre>
<h5>Dynamic Columns</h5> <h5>Dynamic Columns</h5>
<p>Column components can be dynamically generated using a v-for as well.</p> <p>Column components can be dynamically generated using a v-for as well.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt; &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -116,7 +125,8 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsSmall().then(data => this.cars = data);
} }
} }
</CodeHighlight>
</code></pre>
<h5>Column Component Properties utilized by the DataTable</h5> <h5>Column Component Properties utilized by the DataTable</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -305,8 +315,8 @@ export default {
<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. <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> 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>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div&gt; &lt;div&gt;
@ -336,14 +346,14 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Sizes</h5> <h5>Sizes</h5>
<p>In addition to the regular table, a smal and a large version are available with different paddings. For a table <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> with smaller paddings use <i>p-datatable-sm</i> class and for a larger one use <i>p-datatable-lg</i>.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" class="p-datatable-sm"&gt; &lt;DataTable :value="cars" class="p-datatable-sm"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Small Table Small Table
@ -374,12 +384,12 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Column Grouping</h5> <h5>Column Grouping</h5>
<p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p> <p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="sales"&gt; &lt;DataTable :value="sales"&gt;
&lt;ColumnGroup type="header"&gt; &lt;ColumnGroup type="header"&gt;
&lt;Row&gt; &lt;Row&gt;
@ -411,15 +421,15 @@ export default {
&lt;/ColumnGroup&gt; &lt;/ColumnGroup&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Pagination</h5> <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. <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, 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> rows per page options and more which can be passed through the DataTable.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :paginator="true" :rows="10"&gt; &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -427,11 +437,11 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p> <p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :paginator="true" :rows="10"&gt; &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -445,13 +455,13 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the <p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the
first element to display. For example setting first to zero will reset the paginator to the very first page. This property first element to display. For example setting first to zero will reset the paginator to the very first page. This property
also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.</p> also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex"&gt; &lt;DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -459,14 +469,14 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Sorting</h5> <h5>Sorting</h5>
<p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. <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> The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@ -474,11 +484,11 @@ export default {
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p> <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" sortMode="multiple"&gt; &lt;DataTable :value="cars" sortMode="multiple"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@ -486,12 +496,12 @@ export default {
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These <p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These
two properties also support the "sync" keyword to get updated when the user applies sort a column.</p> two properties also support the "sync" keyword to get updated when the user applies sort a column.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" sortField="year" :sortOrder="1"&gt; &lt;DataTable :value="cars" sortField="year" :sortOrder="1"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@ -506,11 +516,11 @@ export default {
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p> <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt; &lt;DataTable :value="cars" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@ -518,9 +528,10 @@ export default {
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
data() { data() {
return { return {
multiSortMeta: [ multiSortMeta: [
@ -529,7 +540,8 @@ data() {
] ]
} }
} }
</CodeHighlight>
</code></pre>
<h5>Filtering</h5> <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> <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>
@ -537,8 +549,8 @@ data() {
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 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
"contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.</p> "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.</p>
<p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p> <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :filters="filters" :paginator="true" :rows="10"&gt; &lt;DataTable :value="cars" :filters="filters" :paginator="true" :rows="10"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align: right"&gt; &lt;div style="text-align: right"&gt;
@ -575,20 +587,21 @@ data() {
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>Custom filtering is implemented by setting the filterMatchMode to "custom" and defining a filter function.</p> <p>Custom filtering is implemented by setting the filterMatchMode to "custom" and defining a filter function.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Column field="vin" header="Vin" filterMatchMode="myOwnEquals"&gt; &lt;Column field="vin" header="Vin" filterMatchMode="myOwnEquals"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" /&gt; &lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
methods: { methods: {
myOwnEquals(value, filter) { myOwnEquals(value, filter) {
if (filter === undefined || filter === null || (typeof filter === 'string' &amp;&amp; filter.trim() === '')) { if (filter === undefined || filter === null || (typeof filter === 'string' &amp;&amp; filter.trim() === '')) {
@ -602,7 +615,8 @@ methods: {
return value.toString().toLowerCase() === filter.toString().toLowerCase(); return value.toString().toLowerCase() === filter.toString().toLowerCase();
} }
} }
</CodeHighlight>
</code></pre>
<h5>Selection</h5> <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. <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.
@ -613,8 +627,8 @@ methods: {
<p>In single mode, selection binding is an object reference.</p> <p>In single mode, selection binding is an object reference.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :selection.sync="selectedCar" selectionMode="single" dataKey="vin"&gt; &lt;DataTable :value="cars" :selection.sync="selectedCar" selectionMode="single" dataKey="vin"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -622,11 +636,11 @@ methods: {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.</p> <p>In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin"&gt; &lt;DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -634,11 +648,11 @@ methods: {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to toggle selection of all rows.</p> <p>If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to toggle selection of all rows.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin"&gt; &lt;DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
&lt;Column selectionMode="multiple"&gt;&lt;/Column&gt; &lt;Column selectionMode="multiple"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -647,12 +661,12 @@ methods: {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Scrolling</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px"&gt; &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -660,12 +674,12 @@ methods: {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Flex Scroll</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
&lt;Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt; &lt;Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt; &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
@ -680,12 +694,12 @@ methods: {
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Full Page Scroll</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div style="height: calc(100vh - 143px)"&gt; &lt;div style="height: calc(100vh - 143px)"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt; &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -695,12 +709,12 @@ methods: {
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Horizontal Scrolling</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px"&gt; &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px"&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"&gt;&lt;/Column&gt;
@ -712,12 +726,12 @@ methods: {
&lt;Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Frozen Rows and Columns</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt; &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true"&gt; &lt;Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
@ -735,11 +749,11 @@ methods: {
&lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>Note that frozen columns are enabled, frozen and scrollable cells may have content with varying height which leads to misalignment. Provide fixed height to cells to avoid alignment issues.</p> <p>Note that frozen columns are enabled, frozen and scrollable cells may have content with varying height which leads to misalignment. Provide fixed height to cells to avoid alignment issues.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt; &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 300px" bodyStyle="height: 25px" columnKey="vin" :frozen="true"&gt; &lt;Column field="vin" header="Vin" headerStyle="width: 300px" bodyStyle="height: 25px" columnKey="vin" :frozen="true"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
@ -751,11 +765,11 @@ methods: {
&lt;Column field="color" header="Color" headerStyle="width: 300px" bodyStyle="height: 25px" columnKey="color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" headerStyle="width: 300px" bodyStyle="height: 25px" columnKey="color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>One or more rows can be displayed as fixed using the <i>frozenValue</i> property.</p> <p>One or more rows can be displayed as fixed using the <i>frozenValue</i> property.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading"&gt; &lt;DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -763,7 +777,7 @@ methods: {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<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> <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>
@ -772,8 +786,8 @@ methods: {
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 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> 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>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" &lt;DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords"&gt; :virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords"&gt;
&lt;Column field="vin" header="Vin"&gt; &lt;Column field="vin" header="Vin"&gt;
@ -798,9 +812,10 @@ methods: {
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -828,7 +843,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Lazy Loading</h5> <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. <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.
@ -841,8 +857,8 @@ export default {
in lazy filtering, totalRecords should also be updated to align the data with the paginator.</p> in lazy filtering, totalRecords should also be updated to align the data with the paginator.</p>
<p>Here is a sample paging implementation with in memory data, a more enhanced example with a backend is being worked on and will be available at a github repository.</p> <p>Here is a sample paging implementation with in memory data, a more enhanced example with a backend is being worked on and will be available at a github repository.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10" &lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt; :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -851,9 +867,10 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -892,14 +909,15 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Row Expansion</h5> <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>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> <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>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin" &lt;DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
@row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt; @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
&lt;template #header&gt; &lt;template #header&gt;
@ -929,9 +947,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -965,7 +984,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>InCell Editing</h5> <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 <p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API
@ -975,8 +995,8 @@ export default {
<p>Individuals cell editing is configured by setting the <i>editMode</i> to "cell" and defining editors with the "editor" template. The content of the <p>Individuals cell editing is configured by setting the <i>editMode</i> to "cell" and defining editors with the "editor" template. The content of the
editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases. editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases.
On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.</p> On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Basic Cell Editing&lt;/h3&gt; &lt;h3&gt;Basic Cell Editing&lt;/h3&gt;
&lt;p&gt;Simple editors with v-model.&lt;/p&gt; &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
&lt;DataTable :value="cars1" editMode="cell"&gt; &lt;DataTable :value="cars1" editMode="cell"&gt;
@ -1019,9 +1039,10 @@ export default {
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
import Vue from 'vue'; import Vue from 'vue';
@ -1104,12 +1125,13 @@ export default {
this.carService.getCarsSmall().then(data => this.cars2 = data); this.carService.getCarsSmall().then(data => this.cars2 = data);
} }
} }
</CodeHighlight>
</code></pre>
<p>Row Editing is defined by setting <i>cellEdit</i> as "row", defining <i>editingRows</i> with the sync operator to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that <p>Row Editing is defined by setting <i>cellEdit</i> as "row", defining <i>editingRows</i> with the sync operator to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that
since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.</p> since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Row Editing&lt;/h3&gt; &lt;h3&gt;Row Editing&lt;/h3&gt;
&lt;DataTable :value="cars" editMode="row" dataKey="vin" :editingRows.sync="editingRows" &lt;DataTable :value="cars" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt; @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt;
@ -1132,9 +1154,10 @@ export default {
&lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt; &lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
import Vue from 'vue'; import Vue from 'vue';
@ -1164,13 +1187,14 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsSmall().then(data => this.cars = data);
} }
} }
</CodeHighlight>
</code></pre>
<h5>Column Resize</h5> <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. <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> 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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt; &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -1178,11 +1202,11 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p> <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt; &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 20%"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin" headerStyle="width: 20%"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 40%"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year" headerStyle="width: 40%"&gt;&lt;/Column&gt;
@ -1190,13 +1214,13 @@ export default {
&lt;Column field="color" header="Color" headerStyle="width: 20%"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" headerStyle="width: 20%"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Column Reorder</h5> <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 <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> it is mandatory for columns to have unique keys when reordering is enabled.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :reorderableColumns="true"&gt; &lt;DataTable :value="cars" :reorderableColumns="true"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -1204,12 +1228,12 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Row Reorder</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt; &lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt;
&lt;Column :rowReorder="true" headerStyle="width: 3em" /&gt; &lt;Column :rowReorder="true" headerStyle="width: 3em" /&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -1218,9 +1242,10 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1243,7 +1268,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Row Group</h5> <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 <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
@ -1252,8 +1278,8 @@ export default {
<p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p> <p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Subheader Grouping&lt;/h3&gt; &lt;h3&gt;Subheader Grouping&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" &lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"&gt; sortMode="single" sortField="brand" :sortOrder="1"&gt;
@ -1305,9 +1331,10 @@ export default {
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt; &lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1346,12 +1373,13 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Data Export</h5> <h5>Data Export</h5>
<p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p> <p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" ref="dt"&gt; &lt;DataTable :value="cars" ref="dt"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align: left"&gt; &lt;div style="text-align: left"&gt;
@ -1364,9 +1392,10 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1388,15 +1417,16 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>TableState</h5> <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. <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. 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. Currently following features are supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
</p> </p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" &lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
stateStorage="session" stateKey="dt-state-demo-session" stateStorage="session" stateKey="dt-state-demo-session"
:selection.sync="selectedCar" selectionMode="single" dataKey="vin"&gt; :selection.sync="selectedCar" selectionMode="single" dataKey="vin"&gt;
@ -1438,9 +1468,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1481,12 +1512,13 @@ export default {
this.carService.getCarsMedium().then(data => this.cars = data); this.carService.getCarsMedium().then(data => this.cars = data);
} }
} }
</CodeHighlight>
</code></pre>
<h5>ContextMenu</h5> <h5>ContextMenu</h5>
<p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p> <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt; &lt;DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -1496,9 +1528,10 @@ export default {
&lt;ContextMenu :model="menuModel" ref="cm" /&gt; &lt;ContextMenu :model="menuModel" ref="cm" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1533,12 +1566,13 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Empty Message</h5> <h5>Empty Message</h5>
<p>When there is no data, you may use the <i>empty</i> template to display a message.</p> <p>When there is no data, you may use the <i>empty</i> template to display a message.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;template #empty&gt; &lt;template #empty&gt;
No records found No records found
@ -1549,13 +1583,13 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Loading</h5> <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 <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> an option loading template is available to render as the body until the data is loaded.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :loading="loading"&gt; &lt;DataTable :value="cars" :loading="loading"&gt;
&lt;template #loading&gt; &lt;template #loading&gt;
Loading records, please wait... Loading records, please wait...
@ -1566,9 +1600,10 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1592,12 +1627,13 @@ export default {
}); });
} }
} }
</CodeHighlight>
</code></pre>
<h5>Responsive</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" class="p-datatable-responsive-demo"&gt; &lt;DataTable :value="cars" class="p-datatable-responsive-demo"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Responsive Responsive
@ -1628,9 +1664,10 @@ export default {
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1647,9 +1684,11 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsSmall().then(data => this.cars = data);
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title { .p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
display: none; display: none;
} }
@ -1681,13 +1720,14 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Row and Cell Styling</h5> <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 <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> row data as a parameter and returns the style class as a string.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="cars" :rowClass="rowClass"&gt; &lt;DataTable :value="cars" :rowClass="rowClass"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt; &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
@ -1701,9 +1741,10 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -1726,9 +1767,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.year-cell { .year-cell {
padding: 0.429em 0.857rem; padding: 0.429em 0.857rem;
@ -1743,7 +1786,8 @@ export default {
background-color: #344b5f !important; background-color: #344b5f !important;
color: #ffffff !important; color: #ffffff !important;
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -2396,7 +2440,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/datatabledemo" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/datatabledemo" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
&#123; &#123;
"data": [ "data": [
&#123; &#123;
@ -2416,10 +2461,11 @@ export default {
&#125; &#125;
&#125;, &#125;,
/... /...
</CodeHighlight>
<CodeHighlight> </code></pre>
<template v-pre>
<pre v-code>
<code><template v-pre>
&lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10" &lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading" dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
@ -2514,9 +2560,10 @@ export default {
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
export default { export default {
@ -2580,9 +2627,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
::v-deep(.p-paginator) { ::v-deep(.p-paginator) {
.p-paginator-current { .p-paginator-current {
margin-left: auto; margin-left: auto;
@ -2676,7 +2725,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -18,15 +18,16 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products"&gt; &lt;DataTable :value="products"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt; &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -51,7 +52,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -95,8 +95,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Basic Cell Editing&lt;/h5&gt; &lt;h5&gt;Basic Cell Editing&lt;/h5&gt;
&lt;p&gt;Simple editors with v-model.&lt;/p&gt; &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
&lt;DataTable :value="products1" editMode="cell" class="editable-cells-table"&gt; &lt;DataTable :value="products1" editMode="cell" class="editable-cells-table"&gt;
@ -176,9 +176,10 @@
&lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt; &lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -277,19 +278,22 @@ export default {
this.productService.getProductsSmall().then(data => this.products3 = data); this.productService.getProductsSmall().then(data => this.products3 = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>
</div> </div>
</template> </template>
<CodeHighlight lang="css"> <pre v-code.css>
<code>
::v-deep(.editable-cells-table td.p-cell-editing) { ::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
</CodeHighlight>
</code></pre>
<script> <script>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';

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

@ -26,8 +26,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" ref="dt"&gt; &lt;DataTable :value="products" ref="dt"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align: left"&gt; &lt;div style="text-align: left"&gt;
@ -40,9 +40,10 @@
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -64,7 +65,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -100,8 +100,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10" &lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
dataKey="id" :filters="filters" :loading="loading"&gt; dataKey="id" :filters="filters" :loading="loading"&gt;
&lt;template #header&gt; &lt;template #header&gt;
@ -188,9 +188,10 @@
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
export default { export default {
@ -251,7 +252,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -27,8 +27,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" class="p-datatable-gridlines"&gt; &lt;DataTable :value="products" class="p-datatable-gridlines"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Header Header
@ -42,9 +42,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -61,7 +62,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -25,8 +25,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" &lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt; :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@ -35,9 +35,10 @@
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt; &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
export default { export default {
@ -76,7 +77,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -30,8 +30,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="customers" :paginator="true" :rows="10" &lt;DataTable :value="customers" :paginator="true" :rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown" paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[10,20,50]" :rowsPerPageOptions="[10,20,50]"
@ -48,9 +48,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
export default { export default {
@ -67,7 +68,8 @@ export default {
this.customerService.getCustomersLarge().then(data => this.customers = data); this.customerService.getCustomersLarge().then(data => this.customers = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -19,16 +19,17 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder"&gt; &lt;DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder"&gt;
&lt;Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" /&gt; &lt;Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" /&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt; &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -62,7 +63,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

18
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -44,8 +44,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10"&gt; &lt;DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Responsive Responsive
@ -76,9 +76,10 @@
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -95,9 +96,11 @@ export default {
this.productService.getProducts().then(data => this.products = data); this.productService.getProducts().then(data => this.products = data);
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title { .p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
display: none; display: none;
} }
@ -133,7 +136,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -72,8 +72,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id" &lt;DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id"
@row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt; @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
&lt;template #header&gt; &lt;template #header&gt;
@ -132,9 +132,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -171,7 +172,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -108,8 +108,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Subheader Grouping&lt;/h5&gt; &lt;h5&gt;Subheader Grouping&lt;/h5&gt;
&lt;p&gt;Group customers by their representative.&lt;/p&gt; &lt;p&gt;Group customers by their representative.&lt;/p&gt;
@ -206,9 +206,10 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
export default { export default {
@ -247,7 +248,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -111,8 +111,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Vertical&lt;/h5&gt; &lt;h5&gt;Vertical&lt;/h5&gt;
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" :loading="loading"&gt; &lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
@ -212,9 +212,10 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
export default { export default {
@ -308,7 +309,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -84,8 +84,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Single&lt;/h5&gt; &lt;h5&gt;Single&lt;/h5&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;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;
@ -158,9 +158,10 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -191,7 +192,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -48,8 +48,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" class="p-datatable-sm"&gt; &lt;DataTable :value="products" class="p-datatable-sm"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Small Table Small Table
@ -80,9 +80,10 @@
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -99,7 +100,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -73,8 +73,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Single Column&lt;/h5&gt; &lt;h5&gt;Single Column&lt;/h5&gt;
&lt;DataTable :value="products"&gt; &lt;DataTable :value="products"&gt;
@ -136,9 +136,10 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -160,7 +161,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -130,8 +130,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Session Storage&lt;/h5&gt; &lt;h5&gt;Session Storage&lt;/h5&gt;
&lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1" &lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
@ -250,9 +250,10 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
import DataTableDoc from './DataTableDoc'; import DataTableDoc from './DataTableDoc';
@ -289,7 +290,8 @@ export default {
this.customerService.getCustomersMedium().then(data => this.customers = data); this.customerService.getCustomersMedium().then(data => this.customers = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -21,8 +21,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" class="p-datatable-striped"&gt; &lt;DataTable :value="products" class="p-datatable-striped"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@ -30,9 +30,10 @@
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -49,7 +50,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

18
src/views/datatable/DataTableStyleDemo.vue
View File

@ -27,8 +27,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products" :rowClass="rowClass"&gt; &lt;DataTable :value="products" :rowClass="rowClass"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@ -42,9 +42,10 @@
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -75,9 +76,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.outofstock { .outofstock {
font-weight: 700; font-weight: 700;
color: #FF5252; color: #FF5252;
@ -97,7 +100,8 @@ export default {
::v-deep(.row-accessories) { ::v-deep(.row-accessories) {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0,0,0,.15) !important;
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

18
src/views/datatable/DataTableTemplatingDemo.vue
View File

@ -48,8 +48,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataTable :value="products"&gt; &lt;DataTable :value="products"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div class="table-header"&gt; &lt;div class="table-header"&gt;
@ -84,9 +84,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -108,9 +109,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.table-header { .table-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -121,7 +124,8 @@ export default {
width: 100px; width: 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>

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

@ -3,17 +3,19 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import DataView from 'primevue/dataview'; import DataView from 'primevue/dataview';
</CodeHighlight>
</code></pre>
<h5>PrimeFlex</h5> <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> <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>
<h5>Getting Started</h5> <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> <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"> <pre v-code.script>
<template v-pre> <code><template v-pre>
export default { export default {
data() { data() {
return { return {
@ -29,14 +31,14 @@ export default {
} }
} }
</template> </template>
</CodeHighlight> </code></pre>
<h5>Layouts</h5> <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 <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> 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> <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>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;template #list="slotProps"&gt; &lt;template #list="slotProps"&gt;
&lt;div class="p-col-12"&gt; &lt;div class="p-col-12"&gt;
&lt;div class="car-details"&gt; &lt;div class="car-details"&gt;
@ -63,20 +65,24 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Sections</h5> <h5>Sections</h5>
<p>Header and Footer are the two templates that are capable of displaying custom content.</p> <p>Header and Footer are the two templates that are capable of displaying custom content.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;template #header&gt;Header Content&lt;/template&gt; &lt;template #header&gt;Header Content&lt;/template&gt;
&lt;template #footer&gt;Footer Content&lt;/template&gt; &lt;template #footer&gt;Footer Content&lt;/template&gt;
</CodeHighlight>
</code></pre>
<h5>Empty Message</h5> <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> <p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;template #empty&gt;No records found.&lt;/template&gt; &lt;template #empty&gt;No records found.&lt;/template&gt;
</CodeHighlight>
</code></pre>
<h5>DataViewLayoutOptions</h5> <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 <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
@ -84,8 +90,8 @@ export default {
you can create your own that updates the layout property of the DataView. you can create your own that updates the layout property of the DataView.
</p> </p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataView :value="cars" :layout="layout"&gt; &lt;DataView :value="cars" :layout="layout"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt; &lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
@ -98,13 +104,13 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Paginator</h5> <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 <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> 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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt; &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
&lt;template #paginatorLeft&gt; &lt;template #paginatorLeft&gt;
&lt;Button type="button" icon="pi pi-refresh"/&gt; &lt;Button type="button" icon="pi pi-refresh"/&gt;
@ -120,13 +126,13 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Sorting</h5> <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. <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> Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt; &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="p-grid p-nogutter"&gt;
@ -146,10 +152,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="js"> <pre v-code.script>
<template v-pre> <code><template v-pre>
export default { export default {
data() { data() {
return { return {
@ -191,14 +197,14 @@ export default {
} }
} }
</template> </template>
</CodeHighlight> </code></pre>
<h5>Lazy Loading</h5> <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. <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 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> need to load the data of the current page.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt; &lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
&lt;template #list="slotProps" &gt; &lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@ -208,10 +214,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="js"> <pre v-code.script>
<template v-pre> <code><template v-pre>
export default { export default {
data() { data() {
return { return {
@ -230,7 +236,7 @@ export default {
} }
} }
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -413,8 +419,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/showcase/dataview" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/showcase/dataview" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"&gt; &lt;DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="p-grid p-nogutter"&gt;
@ -471,9 +477,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -515,7 +522,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,14 +3,16 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import DeferredContent from 'primevue/deferredcontent'; import DeferredContent from 'primevue/deferredcontent';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>DeferredContent is used as a wrapper element of its content..</p> <p>DeferredContent is used as a wrapper element of its content..</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DeferredContent&gt; &lt;DeferredContent&gt;
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -20,12 +22,12 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Load Event</h5> <h5>Load Event</h5>
<p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p> <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;DeferredContent @load="onDataLoad"&gt; &lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -35,7 +37,7 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Component has no properties.</p> <p>Component has no properties.</p>
@ -71,8 +73,8 @@ import DeferredContent from 'primevue/deferredcontent';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div style="height: 800px"&gt; &lt;div style="height: 800px"&gt;
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance. Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
&lt;/div&gt; &lt;/div&gt;
@ -93,9 +95,10 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -118,7 +121,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,19 +3,24 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p> <p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Dialog header="Header" v-model:visible="display" &gt; &lt;Dialog header="Header" v-model:visible="display" &gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -23,17 +28,21 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Header and Footer</h5> <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> <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> <pre v-code>
<code>
&lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt; &lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</CodeHighlight>
<CodeHighlight> </code></pre>
<pre v-code>
<code>
&lt;Dialog v-model:visible="display"&gt; &lt;Dialog v-model:visible="display"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h3&gt;Header&lt;/h3&gt; &lt;h3&gt;Header&lt;/h3&gt;
@ -46,27 +55,33 @@ export default {
&lt;Button label="Yes" icon="pi pi-check" autofocus /&gt; &lt;Button label="Yes" icon="pi pi-check" autofocus /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
</CodeHighlight>
</code></pre>
<h5>Positioning</h5> <h5>Positioning</h5>
<p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p> <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Dialog position="top" v-model:visible="display"&gt; &lt;Dialog position="top" v-model:visible="display"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</CodeHighlight>
</code></pre>
<h5>Popup Content inside the Dialog</h5> <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> <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> <pre v-code>
<code>
&lt;Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}"&gt; &lt;Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</CodeHighlight>
</code></pre>
<h5>Initial Focus</h5> <h5>Initial Focus</h5>
<p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p> <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Dialog v-model:visible="display"&gt; &lt;Dialog v-model:visible="display"&gt;
Content Content
&lt;template #footer&gt; &lt;template #footer&gt;
@ -74,7 +89,8 @@ export default {
&lt;Button label="Yes" autofocus/&gt; &lt;Button label="Yes" autofocus/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -254,8 +270,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openBasic" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="openBasic" /&gt;
&lt;Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}"&gt; &lt;Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}"&gt;
@ -356,9 +372,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -414,9 +431,11 @@ export default {
'DialogDoc': DialogDoc 'DialogDoc': DialogDoc
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.p-button { .p-button {
margin: 0 .5rem 0 0; margin: 0 .5rem 0 0;
min-width: 10rem; min-width: 10rem;
@ -435,7 +454,8 @@ p {
.p-dialog .p-button { .p-dialog .p-button {
min-width: 6rem; min-width: 6rem;
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/display/DisplayDoc.vue
View File

@ -27,7 +27,8 @@
</ul> </ul>
<h5>Examples</h5> <h5>Examples</h5>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-inline"&gt;Displayed as inline.&lt;/div&gt; &lt;div class="p-d-inline"&gt;Displayed as inline.&lt;/div&gt;
&lt;div class="p-d-flex"&gt;Displayed as a flexbox container.&lt;/div&gt; &lt;div class="p-d-flex"&gt;Displayed as a flexbox container.&lt;/div&gt;
&lt;div class="p-d-block p-d-lg-inline"&gt;Inline for larger screens and block for others.&lt;/div&gt; &lt;div class="p-d-block p-d-lg-inline"&gt;Inline for larger screens and block for others.&lt;/div&gt;
@ -35,7 +36,8 @@
&lt;div class="p-d-none p-d-md-inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt; &lt;div class="p-d-none p-d-md-inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt;
&lt;div class="p-d-none p-print-block"&gt;Only visible when printed.&lt;/div&gt; &lt;div class="p-d-none p-print-block"&gt;Only visible when printed.&lt;/div&gt;
&lt;div class="p-d-block p-print-none"&gt;Not available for printing.&lt;/div&gt; &lt;div class="p-d-block p-print-none"&gt;Not available for printing.&lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Customization</h5> <h5>Customization</h5>
<p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p> <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
@ -45,8 +47,8 @@
<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Inline&lt;/h5&gt; &lt;h5&gt;Inline&lt;/h5&gt;
&lt;InputText class="p-mr-2 p-d-inline" /&gt; &lt;InputText class="p-mr-2 p-d-inline" /&gt;
@ -71,7 +73,7 @@
&lt;p class="p-d-block p-print-none"&gt;Not available for printing.&lt;/p&gt; &lt;p class="p-d-block p-print-none"&gt;Not available for printing.&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Dropdown from 'primevue/dropdown'; import Dropdown from 'primevue/dropdown';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code>
<code>
&lt;Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" /&gt; &lt;Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
data() { data() {
return { return {
selectedCity: null, selectedCity: null,
@ -26,7 +31,8 @@ data() {
] ]
} }
} }
</CodeHighlight>
</code></pre>
<h5>Placeholder</h5> <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> <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>
@ -34,15 +40,17 @@ data() {
<h5>Filtering</h5> <h5>Filtering</h5>
<p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property.</p> <p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/&gt; &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/&gt;
</CodeHighlight>
</code></pre>
<h5>Custom Content</h5> <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>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> <p>In addition the <i>value</i> template can be used to customize the selected value.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt; &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt; &lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
@ -61,7 +69,7 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;/Dropdown&gt; &lt;/Dropdown&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -334,8 +342,8 @@ data() {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/dropdown" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/dropdown" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt; &lt;Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
@ -361,9 +369,10 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;/Dropdown&gt; &lt;/Dropdown&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -392,7 +401,8 @@ export default {
} }
}, },
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,19 +3,24 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Editor from 'primevue/editor'; import Editor from 'primevue/editor';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p> <p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Editor v-model="value" editorStyle="height: 320px"/&gt; &lt;Editor v-model="value" editorStyle="height: 320px"/&gt;
</CodeHighlight>
</code></pre>
<h5>Toolbar</h5> <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> <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> <pre v-code>
<code>
&lt;Editor v-model="value" editorStyle="height: 320px"&gt; &lt;Editor v-model="value" editorStyle="height: 320px"&gt;
&lt;template slot="toolbar"&gt; &lt;template slot="toolbar"&gt;
&lt;span class="ql-formats"&gt; &lt;span class="ql-formats"&gt;
@ -25,7 +30,8 @@ import Editor from 'primevue/editor';
&lt;/span&gt; &lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Editor&gt; &lt;/Editor&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -133,17 +139,19 @@ import Editor from 'primevue/editor';
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p> <p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
<p>Resources of quill needs to be added to your application.</p> <p>Resources of quill needs to be added to your application.</p>
<CodeHighlight> <pre v-code>
<code>
npm install quill --save npm install quill --save
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Default&lt;/h3&gt; &lt;h3&gt;Default&lt;/h3&gt;
&lt;Editor v-model="value1" editorStyle="height: 320px"/&gt; &lt;Editor v-model="value1" editorStyle="height: 320px"/&gt;
@ -158,9 +166,10 @@ npm install quill --save
&lt;/template&gt; &lt;/template&gt;
&lt;/Editor&gt; &lt;/Editor&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -169,7 +178,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -4,24 +4,28 @@
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p> <p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-shadow-1" /&gt; &lt;div class="p-shadow-1" /&gt;
</CodeHighlight>
</code></pre>
<h5>Levels</h5> <h5>Levels</h5>
<p>There are 24 depths available varying from 1 to 24.</p> <p>There are 24 depths available varying from 1 to 24.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-shadow-1" /&gt; &lt;div class="p-shadow-1" /&gt;
&lt;div class="p-shadow-24" /&gt; &lt;div class="p-shadow-24" /&gt;
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/elevation" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/elevation" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col" v-for="index in 24" :key="index"&gt; &lt;div class="p-col" v-for="index in 24" :key="index"&gt;
&lt;div :class="['box', 'p-shadow-' + index]"&gt; &lt;div :class="['box', 'p-shadow-' + index]"&gt;
@ -30,7 +34,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,58 +3,70 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Fieldset from 'primevue/fieldset'; import Fieldset from 'primevue/fieldset';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Fieldset is a container component that accepts content as its children.</p> <p>Fieldset is a container component that accepts content as its children.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Fieldset legend="Godfather I"&gt; &lt;Fieldset legend="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 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. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</CodeHighlight>
</code></pre>
<h5>Custom Header</h5> <h5>Custom Header</h5>
<p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p> <p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Fieldset&gt; &lt;Fieldset&gt;
&lt;template #legend&gt; &lt;template #legend&gt;
Header Content Header Content
&lt;/template&gt; &lt;/template&gt;
Content Content
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</CodeHighlight>
</code></pre>
<h5>Toggleable</h5> <h5>Toggleable</h5>
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p> <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Fieldset legend="Godfather I" :toggleable="true"&gt; &lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 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. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</CodeHighlight>
</code></pre>
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p> <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt; &lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt;
Content Content
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</CodeHighlight>
</code></pre>
<p>Use the sync operator to enable two-way binding.</p> <p>Use the sync operator to enable two-way binding.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt; &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
&lt;Fieldset legend="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt; &lt;Fieldset legend="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
Content Content
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -152,8 +164,8 @@ import Fieldset from 'primevue/fieldset';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fieldset" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/fieldset" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Regular&lt;/h5&gt; &lt;h5&gt;Regular&lt;/h5&gt;
&lt;Fieldset legend="Header"&gt; &lt;Fieldset legend="Header"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -170,9 +182,10 @@ import Fieldset from 'primevue/fieldset';
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt; cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -182,7 +195,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,48 +3,62 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import FileUpload from 'primevue/fileupload'; import FileUpload from 'primevue/fileupload';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p> <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload name="demo[]" url="./upload" /&gt; &lt;FileUpload name="demo[]" url="./upload" /&gt;
</CodeHighlight>
</code></pre>
<h5>Multiple Uploads</h5> <h5>Multiple Uploads</h5>
<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p> <p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt; &lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>Basic UI</h5> <h5>Basic UI</h5>
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p> <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
</CodeHighlight>
</code></pre>
<h5>DragDrop</h5> <h5>DragDrop</h5>
<p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p> <p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
<h5>Auto Uploads</h5> <h5>Auto Uploads</h5>
<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p> <p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
</CodeHighlight>
</code></pre>
<h5>File Types</h5> <h5>File Types</h5>
<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p> <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
</CodeHighlight>
</code></pre>
<h5>File Size and File Linit</h5> <h5>File Size and File Linit</h5>
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p> <p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt; &lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
</CodeHighlight>
</code></pre>
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p> <p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
<ul> <ul>
@ -61,25 +75,31 @@ import FileUpload from 'primevue/fileupload';
<h5>Custom Upload</h5> <h5>Custom Upload</h5>
<p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p> <p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt; &lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
myUploader(event) { myUploader(event) {
//event.files == files to upload //event.files == files to upload
} }
</CodeHighlight>
</code></pre>
<h5>Empty Template</h5> <h5>Empty Template</h5>
<p>When there is no file selected, you may use the empty slot to display content.</p> <p>When there is no file selected, you may use the empty slot to display content.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FileUpload name="demo[]" url="./upload" /&gt; &lt;FileUpload name="demo[]" url="./upload" /&gt;
&lt;template #empty&gt; &lt;template #empty&gt;
&lt;p&gt;Drag and drop files to here to upload.&lt;/p&gt; &lt;p&gt;Drag and drop files to here to upload.&lt;/p&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/FileUpload&gt; &lt;/FileUpload&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -297,8 +317,8 @@ myUploader(event) {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fileupload" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/fileupload" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Advanced&lt;/h3&gt; &lt;h3&gt;Advanced&lt;/h3&gt;
&lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"&gt; &lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"&gt;
&lt;template #empty&gt; &lt;template #empty&gt;
@ -312,9 +332,10 @@ myUploader(event) {
&lt;h3&gt;Basic with Auto&lt;/h3&gt; &lt;h3&gt;Basic with Auto&lt;/h3&gt;
&lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
methods: { methods: {
onUpload() { onUpload() {
@ -322,7 +343,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

96
src/views/flexbox/FlexBoxDemo.vue
View File

@ -8,10 +8,12 @@
<h5>Flex Container</h5> <h5>Flex Container</h5>
<p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p> <p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex"&gt;Flex Container&lt;/div&gt; &lt;div class="p-d-flex"&gt;Flex Container&lt;/div&gt;
&lt;div class="p-d-inline-flex"&gt;Inline Flex Container&lt;/div&gt; &lt;div class="p-d-inline-flex"&gt;Inline Flex Container&lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="box p-d-flex p-mb-3">Flex Container</div> <div class="box p-d-flex p-mb-3">Flex Container</div>
<div class="box p-d-inline-flex">Inline Flex Container</div> <div class="box p-d-inline-flex">Inline Flex Container</div>
@ -26,13 +28,15 @@
</ul> </ul>
<h6>Row</h6> <h6>Row</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex"&gt; &lt;div class="p-d-flex"&gt;
&lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2"&gt;Item 2&lt;/div&gt; &lt;div class="p-mr-2"&gt;Item 2&lt;/div&gt;
&lt;div&gt;Item 3&lt;/div&gt; &lt;div&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex"> <div class="p-d-flex">
<div class="p-mr-2">Item 1</div> <div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div> <div class="p-mr-2">Item 2</div>
@ -40,13 +44,15 @@
</div> </div>
<h6>Column</h6> <h6>Column</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-flex-column"&gt; &lt;div class="p-d-flex p-flex-column"&gt;
&lt;div class="p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="p-mb-2"&gt;Item 2&lt;/div&gt;
&lt;div&gt;Item 3&lt;/div&gt; &lt;div&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-flex-column"> <div class="p-d-flex p-flex-column">
<div class="p-mb-2">Item 1</div> <div class="p-mb-2">Item 1</div>
<div class="p-mb-2">Item 2</div> <div class="p-mb-2">Item 2</div>
@ -56,13 +62,15 @@
<h6>Responsive</h6> <h6>Responsive</h6>
<p>Row direction for larger screens and column for smaller.</p> <p>Row direction for larger screens and column for smaller.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-flex-column p-flex-md-row"&gt; &lt;div class="p-d-flex p-flex-column p-flex-md-row"&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mb-2 p-mr-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;Item 2&lt;/div&gt; &lt;div class="p-mb-2 p-mr-2"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;Item 3&lt;/div&gt; &lt;div class="p-mb-2 p-mr-2"&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-flex-column p-flex-md-row"> <div class="p-d-flex p-flex-column p-flex-md-row">
<div class="p-mb-2 p-mr-2">Item 1</div> <div class="p-mb-2 p-mr-2">Item 1</div>
@ -98,13 +106,15 @@
<p>Order configures the way in which they appear in the flex container. <i>p-order-{value}</i> format is used where value can be a number from 0 to 6.</p> <p>Order configures the way in which they appear in the flex container. <i>p-order-{value}</i> format is used where value can be a number from 0 to 6.</p>
<h6>Customized</h6> <h6>Customized</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex"&gt; &lt;div class="p-d-flex"&gt;
&lt;div class="p-mr-2 p-order-3"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2 p-order-3"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-order-1"&gt;Item 2&lt;/div&gt; &lt;div class="p-mr-2 p-order-1"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mr-2 p-order-2"&gt;Item 3&lt;/div&gt; &lt;div class="p-mr-2 p-order-2"&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex"> <div class="p-d-flex">
<div class="p-mr-2 p-order-3">Item 1</div> <div class="p-mr-2 p-order-3">Item 1</div>
<div class="p-mr-2 p-order-1">Item 2</div> <div class="p-mr-2 p-order-1">Item 2</div>
@ -113,13 +123,15 @@
<h6>Responsive</h6> <h6>Responsive</h6>
<p>Orders change depending on the screen size.</p> <p>Orders change depending on the screen size.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex"&gt; &lt;div class="p-d-flex"&gt;
&lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-order-1 p-order-md-3"&gt;Item 2&lt;/div&gt; &lt;div class="p-mr-2 p-order-1 p-order-md-3"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mr-2 p-order-2 p-order-md-1"&gt;Item 3&lt;/div&gt; &lt;div class="p-mr-2 p-order-2 p-order-md-1"&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex"> <div class="p-d-flex">
<div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div> <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
@ -177,7 +189,8 @@
</ul> </ul>
<h6>No Wrap</h6> <h6>No Wrap</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex"&gt; &lt;div class="p-d-flex"&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
@ -186,7 +199,8 @@
&lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex"> <div class="p-d-flex">
<div class="p-mr-2 p-mb-2">Item 1</div> <div class="p-mr-2 p-mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div> <div class="p-mr-2 p-mb-2">Item 2</div>
@ -197,7 +211,8 @@
</div> </div>
<h6>Wrap</h6> <h6>Wrap</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-flex-wrap"&gt; &lt;div class="p-d-flex p-flex-wrap"&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
@ -206,7 +221,8 @@
&lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-flex-wrap"> <div class="p-d-flex p-flex-wrap">
<div class="p-mr-2 p-mb-2">Item 1</div> <div class="p-mr-2 p-mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div> <div class="p-mr-2 p-mb-2">Item 2</div>
@ -217,7 +233,8 @@
</div> </div>
<h6>Wrap Reverse</h6> <h6>Wrap Reverse</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-flex-wrap-reverse"&gt; &lt;div class="p-d-flex p-flex-wrap-reverse"&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
@ -226,7 +243,8 @@
&lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt; &lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-flex-wrap-reverse"> <div class="p-d-flex p-flex-wrap-reverse">
<div class="p-mr-2 p-mb-2">Item 1</div> <div class="p-mr-2 p-mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div> <div class="p-mr-2 p-mb-2">Item 2</div>
@ -268,24 +286,28 @@
</ul> </ul>
<h6>Between</h6> <h6>Between</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-jc-between"&gt; &lt;div class="p-d-flex p-jc-between"&gt;
&lt;div&gt;Item 1&lt;/div&gt; &lt;div&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt; &lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-jc-between"> <div class="p-d-flex p-jc-between">
<div>Item 1</div> <div>Item 1</div>
<div>Item 2</div> <div>Item 2</div>
</div> </div>
<h6>Center</h6> <h6>Center</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-jc-center"&gt; &lt;div class="p-d-flex p-jc-center"&gt;
&lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt; &lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-jc-center"> <div class="p-d-flex p-jc-center">
<div class="p-mr-2">Item 1</div> <div class="p-mr-2">Item 1</div>
<div>Item 2</div> <div>Item 2</div>
@ -337,24 +359,28 @@
</ul> </ul>
<h6>Start</h6> <h6>Start</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-ai-start"&gt; &lt;div class="p-d-flex p-ai-start"&gt;
&lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt; &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-ai-start"> <div class="p-d-flex p-ai-start">
<div class="p-mr-2" style="height:100px">Item 1</div> <div class="p-mr-2" style="height:100px">Item 1</div>
<div style="height:50px">Item 2</div> <div style="height:50px">Item 2</div>
</div> </div>
<h6>Center</h6> <h6>Center</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-ai-center"&gt; &lt;div class="p-d-flex p-ai-center"&gt;
&lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt; &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-ai-center"> <div class="p-d-flex p-ai-center">
<div class="p-mr-2" style="height:100px">Item 1</div> <div class="p-mr-2" style="height:100px">Item 1</div>
<div style="height:50px">Item 2</div> <div style="height:50px">Item 2</div>
@ -400,14 +426,16 @@
<li>stretch (default)</li> <li>stretch (default)</li>
</ul> </ul>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex" style="height: 150px;"&gt; &lt;div class="p-d-flex" style="height: 150px;"&gt;
&lt;div class="p-mr-2 p-as-start"&gt;Start&lt;/div&gt; &lt;div class="p-mr-2 p-as-start"&gt;Start&lt;/div&gt;
&lt;div class="p-mr-2 p-as-center"&gt;Center&lt;/div&gt; &lt;div class="p-mr-2 p-as-center"&gt;Center&lt;/div&gt;
&lt;div class="p-mr-2 p-as-end"&gt;End&lt;/div&gt; &lt;div class="p-mr-2 p-as-end"&gt;End&lt;/div&gt;
&lt;div class="p-mr-2 p-as-stretch"&gt;Stretch&lt;/div&gt; &lt;div class="p-mr-2 p-as-stretch"&gt;Stretch&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex" style="height: 150px;"> <div class="p-d-flex" style="height: 150px;">
<div class="p-mr-2 p-as-start">Start</div> <div class="p-mr-2 p-as-start">Start</div>
<div class="p-mr-2 p-as-center">Center</div> <div class="p-mr-2 p-as-center">Center</div>
@ -494,13 +522,15 @@
<p>When combined with <router-link to="/setup">spacing utilities</router-link>, flexbox offers endless possibilities.</p> <p>When combined with <router-link to="/setup">spacing utilities</router-link>, flexbox offers endless possibilities.</p>
<h6>Horizontal Spacing</h6> <h6>Horizontal Spacing</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-p-3 card"&gt; &lt;div class="p-d-flex p-p-3 card"&gt;
&lt;Button type="Button" icon="pi pi-check" class="p-mr-2" /&gt; &lt;Button type="Button" icon="pi pi-check" class="p-mr-2" /&gt;
&lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt; &lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt;
&lt;Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/&gt; &lt;Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-p-3 card"> <div class="p-d-flex p-p-3 card">
<Button type="Button" icon="pi pi-check" class="p-mr-2" /> <Button type="Button" icon="pi pi-check" class="p-mr-2" />
<Button type="Button" icon="pi pi-trash" class="p-button-danger"/> <Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
@ -508,12 +538,14 @@
</div> </div>
<h6>Vertical Spacing</h6> <h6>Vertical Spacing</h6>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-d-flex p-flex-column" style="height:150px"&gt; &lt;div class="p-d-flex p-flex-column" style="height:150px"&gt;
&lt;div&gt;Item 1&lt;/div&gt; &lt;div&gt;Item 1&lt;/div&gt;
&lt;div class="p-mt-auto"&gt;Item 2&lt;/div&gt; &lt;div class="p-mt-auto"&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-d-flex p-flex-column" style="height:150px"> <div class="p-d-flex p-flex-column" style="height:150px">
<div>Item 1</div> <div>Item 1</div>
<div class="p-mt-auto">Item 2</div> <div class="p-mt-auto">Item 2</div>

12
src/views/floatlabel/FloatLabelDemo.vue
View File

@ -83,8 +83,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="p-fluid p-grid"&gt; &lt;div class="p-fluid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt; &lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt; &lt;span class="p-float-label"&gt;
@ -153,9 +153,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CountryService from '../../service/CountryService'; import CountryService from '../../service/CountryService';
export default { export default {
@ -204,7 +205,8 @@ export default {
} }
}, },
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -4,16 +4,19 @@
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Getting Started</h5> <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> <p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="fieldId"&gt;Label&lt;/label&gt; &lt;label for="fieldId"&gt;Label&lt;/label&gt;
&lt;InputText id="fieldId" type="text" /&gt; &lt;InputText id="fieldId" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Vertical Layout</h5> <h5>Vertical Layout</h5>
<p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p> <p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-fluid"&gt; &lt;div class="p-fluid"&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt; &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
@ -24,12 +27,14 @@
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Vertical Layout with Grid</h5> <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 <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> below arranges two fields to be displayed next two each other.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-fluid p-formgrid p-grid"&gt; &lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col"&gt; &lt;div class="p-field p-col"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt; &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
@ -40,13 +45,15 @@
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Horizontal and Fixed Width</h5> <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 <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. example, label has a fixed width where container of the inputs gets the remaining space.
</p> </p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-field p-grid"&gt; &lt;div class="p-field p-grid"&gt;
&lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt; &lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
@ -59,11 +66,13 @@
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Horizontal and Fluid</h5> <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> <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> <pre v-code>
<code>
&lt;div class="p-fluid"&gt; &lt;div class="p-fluid"&gt;
&lt;div class="p-field p-grid"&gt; &lt;div class="p-field p-grid"&gt;
&lt;label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt; &lt;label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt;
@ -78,12 +87,14 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Inline</h5> <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 <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> are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-formgroup-inline"&gt; &lt;div class="p-formgroup-inline"&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt; &lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt;
@ -95,12 +106,14 @@
&lt;/div&gt; &lt;/div&gt;
&lt;Button type="button" label="Submit" /&gt; &lt;Button type="button" label="Submit" /&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Checkbox and RadioButton</h5> <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. <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> Examples here demonstrates vertical and horizontal layout alternatives.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;h3&gt;Vertical Checkbox&lt;/h3&gt; &lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt; &lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt;
@ -122,9 +135,11 @@
&lt;label for="city4"&gt;Los Angeles&lt;/label&gt; &lt;label for="city4"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
<CodeHighlight> </code></pre>
<pre v-code>
<code>
&lt;h3&gt;Vertical RadioButton&lt;/h3&gt; &lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
&lt;div class="p-field-radiobutton"&gt; &lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt; &lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt;
@ -146,21 +161,25 @@
&lt;label for="city8"&gt;Los Angeles&lt;/label&gt; &lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Helper text</h5> <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> <p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-field p-fluid"&gt; &lt;div class="p-field p-fluid"&gt;
&lt;label for="username"&gt;Username&lt;/label&gt; &lt;label for="username"&gt;Username&lt;/label&gt;
&lt;InputText id="username" type="username" aria-describedby="username-help" /&gt; &lt;InputText id="username" type="username" aria-describedby="username-help" /&gt;
&lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt; &lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Advanced Forms</h5> <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> <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> <pre v-code>
<code>
&lt;div class="p-fluid p-formgrid p-grid"&gt; &lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt; &lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt; &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
@ -187,7 +206,8 @@
&lt;InputText id="zip" type="text" /&gt; &lt;InputText id="zip" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Customization</h5> <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> <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>
@ -219,8 +239,8 @@
<a href="https://github.com/primefaces/primevue/tree/master/src/views/formlayout" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/formlayout" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Vertical&lt;/h3&gt; &lt;h3&gt;Vertical&lt;/h3&gt;
&lt;div class="p-fluid"&gt; &lt;div class="p-fluid"&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
@ -367,9 +387,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -388,7 +409,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,37 +3,48 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import FullCalendar from 'primevue/fullcalendar'; import FullCalendar from 'primevue/fullcalendar';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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. <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> For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
<CodeHighlight> <pre v-code>
<code>
npm install @fullcalendar/core --save npm install @fullcalendar/core --save
</CodeHighlight>
</code></pre>
<p>FullCalendar is plugin based so install the plugins you require and define them with the options property.</p> <p>FullCalendar is plugin based so install the plugins you require and define them with the options property.</p>
<CodeHighlight> <pre v-code>
<code>
npm install @fullcalendar/daygrid --save npm install @fullcalendar/daygrid --save
npm install @fullcalendar/timegrid --save npm install @fullcalendar/timegrid --save
npm install @fullcalendar/interaction --save npm install @fullcalendar/interaction --save
</CodeHighlight>
</code></pre>
<p>Include the core style and the styles of the plugins that you use in your application.</p> <p>Include the core style and the styles of the plugins that you use in your application.</p>
<CodeHighlight> <pre v-code>
<code>
import '@fullcalendar/core/main.min.css'; import '@fullcalendar/core/main.min.css';
import '@fullcalendar/daygrid/main.min.css'; import '@fullcalendar/daygrid/main.min.css';
import '@fullcalendar/timegrid/main.min.css'; import '@fullcalendar/timegrid/main.min.css';
</CodeHighlight>
</code></pre>
<p>Events should be an array and defined using the events property.</p> <p>Events should be an array and defined using the events property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;FullCalendar :events="events" /&gt; &lt;FullCalendar :events="events" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -75,10 +86,12 @@ export default {
}; };
} }
} }
</CodeHighlight>
</code></pre>
<p>In a real application, it is likely to populate the events by making a remote call, when the events are updated, the component will detect the change and render them.</p> <p>In a real application, it is likely to populate the events by making a remote call, when the events are updated, the component will detect the change and render them.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
import axios from 'axios'; import axios from 'axios';
export default class EventService { export default class EventService {
@ -87,9 +100,11 @@ export default class EventService {
return axios.get('demo/data/events.json').then(res => res.data.data); return axios.get('demo/data/events.json').then(res => res.data.data);
} }
} }
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
import EventService from '../../service/EventService'; import EventService from '../../service/EventService';
export default { export default {
@ -106,15 +121,19 @@ export default {
this.eventService.getEvents().then(data => this.events = data); this.eventService.getEvents().then(data => this.events = data);
} }
} }
</CodeHighlight>
</code></pre>
<h5>Options</h5> <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> <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> <pre v-code>
<code>
&lt;FullCalendar :events="events" :options="options" /&gt; &lt;FullCalendar :events="events" :options="options" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
import EventService from '../../service/EventService'; import EventService from '../../service/EventService';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
@ -144,11 +163,13 @@ export default {
this.eventService.getEvents().then(data => this.events = data); this.eventService.getEvents().then(data => this.events = data);
} }
} }
</CodeHighlight>
</code></pre>
<h5>Callbacks</h5> <h5>Callbacks</h5>
<p>Callbacks of the FullCalendar such as dateClick are also defined with the options property.</p> <p>Callbacks of the FullCalendar such as dateClick are also defined with the options property.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -168,7 +189,8 @@ export default {
}; };
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -204,13 +226,14 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fullcalendar" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/fullcalendar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;FullCalendar :events="events" :options="options" /&gt; &lt;FullCalendar :events="events" :options="options" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import EventService from '../../service/EventService'; import EventService from '../../service/EventService';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
@ -240,7 +263,8 @@ export default {
this.eventService.getEvents().then(data => this.events = data); this.eventService.getEvents().then(data => this.events = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -38,8 +38,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass" &lt;Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt; :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
@ -64,9 +64,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -97,9 +98,11 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
::v-deep(.custom-galleria) { ::v-deep(.custom-galleria) {
&.fullscreen { &.fullscreen {
display: flex; display: flex;
@ -160,7 +163,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/galleria/GalleriaAutoPlayDemo.vue
View File

@ -24,8 +24,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000"&gt; :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
@ -36,9 +36,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -69,7 +70,8 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/galleria/GalleriaCaptionDemo.vue
View File

@ -29,8 +29,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
@ -46,9 +46,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -79,7 +80,8 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,23 +3,28 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Galleria from 'primevue/galleria'; import Galleria from 'primevue/galleria';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Galleria requires item template and a value as an array of objects.</p> <p>Galleria requires item template and a value as an array of objects.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Galleria :value="images"&gt; &lt;Galleria :value="images"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</CodeHighlight>
</code></pre>
<p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p> <p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
<div style="overflow: auto; height: 400px"> <div style="overflow: auto; height: 400px">
<CodeHighlight lang="js"> <pre v-code.script>
<code>
{ {
"data":[ "data":[
{ {
@ -114,10 +119,12 @@ import Galleria from 'primevue/galleria';
} }
] ]
} }
</CodeHighlight>
</code></pre>
</div> </div>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
import axios from 'axios' import axios from 'axios'
export default class PhotoService { export default class PhotoService {
@ -126,9 +133,11 @@ export default class PhotoService {
return axios.get('demo/data/photos.json').then(res => res.data.data); return axios.get('demo/data/photos.json').then(res => res.data.data);
} }
} }
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -143,12 +152,14 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
</code></pre>
<h5>Items per page</h5> <h5>Items per page</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property.</p> <p>Number of items per page is defined using the <i>numVisible</i> property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Galleria :value="images" :numVisible="5"&gt; &lt;Galleria :value="images" :numVisible="5"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@ -157,13 +168,15 @@ export default {
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</CodeHighlight>
</code></pre>
<h5>Responsive</h5> <h5>Responsive</h5>
<p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of <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> objects whose breakpoint defines the max-width to apply the settings.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@ -172,9 +185,11 @@ export default {
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
responsiveOptions: [ responsiveOptions: [
{ {
breakpoint: '1024px', breakpoint: '1024px',
@ -189,11 +204,13 @@ responsiveOptions: [
numVisible: 1 numVisible: 1
} }
] ]
</CodeHighlight>
</code></pre>
<h5>Header and Footer</h5> <h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p> <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h1&gt;Header&lt;/h1&gt; &lt;h1&gt;Header&lt;/h1&gt;
@ -205,18 +222,21 @@ responsiveOptions: [
&lt;h1&gt;Footer&lt;/h1&gt; &lt;h1&gt;Footer&lt;/h1&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</CodeHighlight>
</code></pre>
<h5>Indicators</h5> <h5>Indicators</h5>
<p>Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further <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> with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and <i>indicatorsPosition</i> properties.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Galleria :value="images" :showIndicators="true"&gt; &lt;Galleria :value="images" :showIndicators="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -438,8 +458,8 @@ responsiveOptions: [
<a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@ -449,9 +469,10 @@ responsiveOptions: [
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -482,7 +503,8 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>

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

@ -61,8 +61,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;With Thumbnails&lt;/h3&gt; &lt;h3&gt;With Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic"&gt; :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic"&gt;
@ -106,9 +106,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -167,7 +168,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -87,8 +87,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Indicators with Click Event&lt;/h3&gt; &lt;h3&gt;Indicators with Click Event&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true"&gt; :showThumbnails="false" :showIndicators="true"&gt;
@ -150,9 +150,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -187,9 +188,11 @@ export default {
}); });
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
::v-deep(.custom-indicator-galleria) { ::v-deep(.custom-indicator-galleria) {
.indicator-text { .indicator-text {
color: #e9ecef; color: #e9ecef;
@ -202,7 +205,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -64,8 +64,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt; &lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true"&gt; :showItemNavigators="true"&gt;
@ -110,9 +110,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -143,7 +144,8 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/galleria/GalleriaProgrammaticDemo.vue
View File

@ -28,8 +28,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div style="padding: .5rem 0"&gt; &lt;div style="padding: .5rem 0"&gt;
&lt;Button icon="pi pi-minus" @click="prev" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-minus" @click="prev" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt; &lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt;
@ -44,9 +44,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -86,7 +87,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/galleria/GalleriaResponsiveDemo.vue
View File

@ -23,8 +23,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@ -34,9 +34,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -71,7 +72,8 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -64,8 +64,8 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Positioned at Bottom&lt;/h3&gt; &lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
@ -110,9 +110,10 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PhotoService from '../../service/PhotoService'; import PhotoService from '../../service/PhotoService';
export default { export default {
@ -153,7 +154,8 @@ export default {
this.galleriaService.getImages().then(data => this.images = data); this.galleriaService.getImages().then(data => this.images = data);
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

66
src/views/grid/GridDoc.vue
View File

@ -5,13 +5,15 @@
<h5>Getting Started</h5> <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 <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> 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> <pre v-code>
<code>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt;1&lt;/div&gt; &lt;div class="p-col"&gt;1&lt;/div&gt;
&lt;div class="p-col"&gt;2&lt;/div&gt; &lt;div class="p-col"&gt;2&lt;/div&gt;
&lt;div class="p-col"&gt;3&lt;/div&gt; &lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-grid"> <div class="p-grid">
<div class="p-col"> <div class="p-col">
@ -29,7 +31,8 @@
<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>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> <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>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-4"&gt;4&lt;/div&gt; &lt;div class="p-col-4"&gt;4&lt;/div&gt;
&lt;div class="p-col"&gt;1&lt;/div&gt; &lt;div class="p-col"&gt;1&lt;/div&gt;
@ -47,7 +50,8 @@
&lt;div class="p-col-6"&gt;6&lt;/div&gt; &lt;div class="p-col-6"&gt;6&lt;/div&gt;
&lt;div class="p-col-4"&gt;4&lt;/div&gt; &lt;div class="p-col-4"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-4"> <div class="p-col-4">
@ -93,14 +97,16 @@
<h5>MultiLine</h5> <h5>MultiLine</h5>
<p>When the number of columns exceed 12, columns wrap to a new line.</p> <p>When the number of columns exceed 12, columns wrap to a new line.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-6"&gt;6&lt;/div&gt; &lt;div class="p-col-6"&gt;6&lt;/div&gt;
&lt;div class="p-col-6"&gt;6&lt;/div&gt; &lt;div class="p-col-6"&gt;6&lt;/div&gt;
&lt;div class="p-col-6"&gt;6&lt;/div&gt; &lt;div class="p-col-6"&gt;6&lt;/div&gt;
&lt;div class="p-col-6"&gt;6&lt;/div&gt; &lt;div class="p-col-6"&gt;6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-6"> <div class="p-col-6">
@ -119,12 +125,14 @@
<h5>Fixed Width Column</h5> <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> <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> <pre v-code>
<code>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-fixed" style="width:100px"&gt;Fixed&lt;/div&gt; &lt;div class="p-col-fixed" style="width:100px"&gt;Fixed&lt;/div&gt;
&lt;div class="p-col"&gt;Auto&lt;/div&gt; &lt;div class="p-col"&gt;Auto&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-fixed" style="width:100px"> <div class="p-col-fixed" style="width:100px">
@ -176,14 +184,16 @@
</div> </div>
<p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p> <p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;A&lt;/div&gt; &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;A&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;B&lt;/div&gt; &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;B&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;C&lt;/div&gt; &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;C&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;D&lt;/div&gt; &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;D&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-6 p-lg-3"> <div class="p-col-12 p-md-6 p-lg-3">
@ -201,7 +211,8 @@
</div> </div>
<h5>Offset</h5> <h5>Offset</h5>
<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p> <p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-6 p-offset-3"&gt;6&lt;/div&gt; &lt;div class="p-col-6 p-offset-3"&gt;6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -210,7 +221,8 @@
&lt;div class="p-col-4"&gt;4&lt;/div&gt; &lt;div class="p-col-4"&gt;4&lt;/div&gt;
&lt;div class="p-col-4 p-offset-4"&gt;4&lt;/div&gt; &lt;div class="p-col-4 p-offset-4"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-6 p-offset-3"> <div class="p-col-6 p-offset-3">
@ -274,7 +286,8 @@
<h5>Nested</h5> <h5>Nested</h5>
<p>Columns can be nested to create more complex layouts.</p> <p>Columns can be nested to create more complex layouts.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-grid nested-grid"&gt; &lt;div class="p-grid nested-grid"&gt;
&lt;div class="p-col-8"&gt; &lt;div class="p-col-8"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
@ -293,7 +306,8 @@
4 4
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<div class="p-grid nested-grid"> <div class="p-grid nested-grid">
<div class="p-col-8"> <div class="p-col-8">
@ -318,21 +332,23 @@
<p>A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply <p>A .5rem 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. <i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
</p> </p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col"&gt;1&lt;/div&gt; &lt;div class="p-col"&gt;1&lt;/div&gt;
&lt;div class="p-col p-nogutter"&gt;2&lt;/div&gt; &lt;div class="p-col p-nogutter"&gt;2&lt;/div&gt;
&lt;div class="p-col"&gt;3&lt;/div&gt; &lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/flexgrid" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/flexgrid" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
<h5>Basic</h5> <h5>Basic</h5>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
@ -701,9 +717,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -719,9 +736,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.flexgrid-demo { .flexgrid-demo {
.box { .box {
background-color: var(--surface-e); background-color: var(--surface-e);
@ -763,7 +782,8 @@ export default {
margin: 0; margin: 0;
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -7,18 +7,22 @@
<h5>Download</h5> <h5>Download</h5>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p> <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
npm install primeicons --save npm install primeicons --save
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. <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> A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
<CodeHighlight> <pre v-code>
<code>
&lt;i class="pi pi-check"&gt;&lt;/i&gt; &lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt; &lt;i class="pi pi-times"&gt;&lt;/i&gt;
</CodeHighlight>
</code></pre>
<i class="pi pi-check" style="margin-right: .5rem"></i> <i class="pi pi-check" style="margin-right: .5rem"></i>
<i class="pi pi-times"></i> <i class="pi pi-times"></i>
@ -26,23 +30,29 @@ npm install primeicons --save
<h5>Size</h5> <h5>Size</h5>
<p>Size of the icons can easily be changed using font-size property.</p> <p>Size of the icons can easily be changed using font-size property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;i class="pi pi-check"&gt;&lt;/i&gt; &lt;i class="pi pi-check"&gt;&lt;/i&gt;
</CodeHighlight>
</code></pre>
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
<CodeHighlight> <pre v-code>
<code>
&lt;i class="pi pi-check" style="fontSize: 2rem"&gt;&lt;/i&gt; &lt;i class="pi pi-check" style="fontSize: 2rem"&gt;&lt;/i&gt;
</CodeHighlight>
</code></pre>
<i class="pi pi-check" style="fontSize: 2rem"></i> <i class="pi pi-check" style="fontSize: 2rem"></i>
<h5>Spinning Animation</h5> <h5>Spinning Animation</h5>
<p>Special pi-spin class applies continuous rotation to an icon.</p> <p>Special pi-spin class applies continuous rotation to an icon.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;i class="pi pi-spin pi-spinner" style="fontSize: 2rem"&gt;&lt;/i&gt; &lt;i class="pi pi-spin pi-spinner" style="fontSize: 2rem"&gt;&lt;/i&gt;
</CodeHighlight>
</code></pre>
<i class="pi pi-spin pi-spinner" style="fontSize: 2rem"></i> <i class="pi pi-spin pi-spinner" style="fontSize: 2rem"></i>

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

@ -3,15 +3,17 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Inplace from 'primevue/inplace'; import Inplace from 'primevue/inplace';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Inplace requires <i>display</i> and <i>content</i> templates to define the content of each state.</p> <p>Inplace requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Inplace&gt; &lt;Inplace&gt;
&lt;template #display&gt; &lt;template #display&gt;
&lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt; &lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
@ -22,12 +24,12 @@ import Inplace from 'primevue/inplace';
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Closable</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Inplace :closable="true"&gt; &lt;Inplace :closable="true"&gt;
&lt;template #display&gt; &lt;template #display&gt;
&#123;&#123;text || 'Click to Edit'&#125;&#125; &#123;&#123;text || 'Click to Edit'&#125;&#125;
@ -37,12 +39,12 @@ import Inplace from 'primevue/inplace';
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Lazy Data</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Inplace @open="loadData"&gt; &lt;Inplace @open="loadData"&gt;
&lt;template #display&gt; &lt;template #display&gt;
View Data View Data
@ -57,9 +59,10 @@ import Inplace from 'primevue/inplace';
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
@ -78,7 +81,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -169,8 +173,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inplace" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inplace" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Input&lt;/h3&gt; &lt;h3&gt;Input&lt;/h3&gt;
&lt;Inplace :closable="true"&gt; &lt;Inplace :closable="true"&gt;
&lt;template #display&gt; &lt;template #display&gt;
@ -207,9 +211,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -229,7 +234,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

12
src/views/inputgroup/InputGroupDoc.vue
View File

@ -5,8 +5,8 @@
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputgroup" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputgroup" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Addons&lt;/h3&gt; &lt;h3&gt;Addons&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt; &lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4"&gt;
@ -109,9 +109,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -122,7 +123,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,15 +3,19 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import InputMask from 'primevue/inputmask'; import InputMask from 'primevue/inputmask';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p> <p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputMask v-model="value" mask="99-999999" /&gt; &lt;InputMask v-model="value" mask="99-999999" /&gt;
</CodeHighlight>
</code></pre>
<h5>Mask</h5> <h5>Mask</h5>
<p>Mask format can be a combination of the the following built-in definitions.</p> <p>Mask format can be a combination of the the following built-in definitions.</p>
@ -27,23 +31,29 @@ import InputMask from 'primevue/inputmask';
* - Alpha numberic character (A-Z,a-z,0-9) * - Alpha numberic character (A-Z,a-z,0-9)
</li> </li>
</ul> </ul>
<CodeHighlight> <pre v-code>
<code>
&lt;InputMask v-model="value" mask="a*-999-a999" /&gt; &lt;InputMask v-model="value" mask="a*-999-a999" /&gt;
</CodeHighlight>
</code></pre>
<h5>SlotChar</h5> <h5>SlotChar</h5>
<p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p> <p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt; &lt;InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
</CodeHighlight>
</code></pre>
<h5>Optional Values</h5> <h5>Optional Values</h5>
<p>If the input does not complete the mask definition, it is cleared by default. <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 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 a mask can be made optional by using ? symbol where anything after the question
mark becomes optional.</p> mark becomes optional.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputMask v-model="value" mask="(999) 999-9999? x99999" /&gt; &lt;InputMask v-model="value" mask="(999) 999-9999? x99999" /&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element. In addition;</p> <p>InputText passes any valid attribute to the underlying input element. In addition;</p>
@ -122,8 +132,8 @@ import InputMask from 'primevue/inputmask';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="p-fluid p-formgrid p-grid"&gt; &lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt; &lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="basic"&gt;Basic&lt;/label&gt; &lt;label for="basic"&gt;Basic&lt;/label&gt;
@ -156,9 +166,10 @@ import InputMask from 'primevue/inputmask';
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -171,7 +182,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,31 +3,40 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import InputNumber from 'primevue/inputnumber'; import InputNumber from 'primevue/inputnumber';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code>
<code>
&lt;InputNumber v-model="value" /&gt; &lt;InputNumber v-model="value" /&gt;
</CodeHighlight>
</code></pre>
<h5>Decimal Mode</h5> <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> <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> <pre v-code>
<code>
&lt;InputNumber v-model="value" mode="decimal" /&gt; &lt;InputNumber v-model="value" mode="decimal" /&gt;
</CodeHighlight>
</code></pre>
<p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p> <p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt; &lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt;
&lt;InputNumber v-model="value2" mode="decimal" :minFractionDigits="2" :maxFractionDigits="2" /&gt; &lt;InputNumber v-model="value2" mode="decimal" :minFractionDigits="2" :maxFractionDigits="2" /&gt;
</CodeHighlight>
</code></pre>
<p><i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per <a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.</p> <p><i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per <a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.</p>
<CodeHighlight> <pre v-code>
<code>
User Locale User Locale
&lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt; &lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt;
@ -39,12 +48,14 @@ German Locale
Indian Locale Indian Locale
&lt;InputNumber v-model="value4" mode="decimal" locale="en-IN" :minFractionDigits="2" /&gt; &lt;InputNumber v-model="value4" mode="decimal" locale="en-IN" :minFractionDigits="2" /&gt;
</CodeHighlight>
</code></pre>
<h5>Currency</h5> <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 <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> allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
<CodeHighlight> <pre v-code>
<code>
United States United States
&lt;InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" /&gt; &lt;InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" /&gt;
@ -56,11 +67,13 @@ India
Japan Japan
&lt;InputNumber v-model="value4" mode="currency" currency="JPY" locale="jp-JP" /&gt; &lt;InputNumber v-model="value4" mode="currency" currency="JPY" locale="jp-JP" /&gt;
</CodeHighlight>
</code></pre>
<h5>Prefix and Suffix</h5> <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> <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> <pre v-code>
<code>
Mile Mile
&lt;InputNumber v-model="value1" suffix=" mi" /&gt; &lt;InputNumber v-model="value1" suffix=" mi" /&gt;
@ -72,12 +85,14 @@ Expiry
Temperature Temperature
&lt;InputNumber v-model="value4" prefix="&uarr; " suffix="℃" :min="0" :max="40" /&gt; &lt;InputNumber v-model="value4" prefix="&uarr; " suffix="℃" :min="0" :max="40" /&gt;
</CodeHighlight>
</code></pre>
<h5>Buttons</h5> <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 <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> "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> <pre v-code>
<code>
Stacked Stacked
&lt;InputNumber v-model="value1" showButtons mode="currency" currency="USD" /&gt; &lt;InputNumber v-model="value1" showButtons mode="currency" currency="USD" /&gt;
@ -88,20 +103,25 @@ Horizontal
Vertical Vertical
&lt;InputNumber v-model="value3" mode="decimal" showButtons buttonLayout="vertical" &lt;InputNumber v-model="value3" mode="decimal" showButtons buttonLayout="vertical"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /&gt; decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /&gt;
</CodeHighlight>
</code></pre>
<h5>Step</h5> <h5>Step</h5>
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p> <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputNumber v-model="value" :step="0.25" /&gt; &lt;InputNumber v-model="value" :step="0.25" /&gt;
</CodeHighlight>
</code></pre>
<h5>Min and Max Boundaries</h5> <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> <p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputNumber v-model="value" :min="0" :max="100" /&gt; &lt;InputNumber v-model="value" :min="0" :max="100" /&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
@ -318,8 +338,8 @@ Vertical
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Numerals&lt;/h3&gt; &lt;h3&gt;Numerals&lt;/h3&gt;
&lt;div class="p-fluid p-grid p-formgrid"&gt; &lt;div class="p-fluid p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt; &lt;div class="p-field p-col-12 p-md-3"&gt;
@ -420,9 +440,10 @@ Vertical
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /&gt; decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -449,7 +470,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import InputSwitch from 'primevue/inputswitch'; import InputSwitch from 'primevue/inputswitch';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p> <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputSwitch v-model="checked" /&gt; &lt;InputSwitch v-model="checked" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -21,11 +26,13 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.</p> <p>As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -33,7 +40,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <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> <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>
@ -96,17 +104,18 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputswitch" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputswitch" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;InputSwitch v-model="checked1" /&gt; &lt;InputSwitch v-model="checked1" /&gt;
&lt;h3&gt;Preselection&lt;/h3&gt; &lt;h3&gt;Preselection&lt;/h3&gt;
&lt;InputSwitch v-model="checked2" /&gt; &lt;InputSwitch v-model="checked2" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -115,7 +124,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,29 +3,36 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import InputText from 'primevue/inputtext'; import InputText from 'primevue/inputtext';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p> <p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputText type="text" v-model="value" /&gt; &lt;InputText type="text" v-model="value" /&gt;
</CodeHighlight>
</code></pre>
<h5>Float Label</h5> <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> <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> <pre v-code>
<code>
&lt;span class="p-float-label"&gt; &lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value" /&gt; &lt;InputText id="username" type="text" v-model="value" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt; &lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt; &lt;/span&gt;
</CodeHighlight>
</code></pre>
<h5>Icons</h5> <h5>Icons</h5>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i> <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i>
and <i>p-input-icon-left</i> classes depending on the icon location.</p> and <i>p-input-icon-left</i> classes depending on the icon location.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;span class="p-input-icon-left"&gt; &lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt; &lt;i class="pi pi-search" /&gt;
&lt;InputText type="text" v-model="value1" placeholder="Search" /&gt; &lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
@ -41,39 +48,46 @@ import InputText from 'primevue/inputtext';
&lt;InputText type="text" v-model="value3" /&gt; &lt;InputText type="text" v-model="value3" /&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt; &lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;/span&gt; &lt;/span&gt;
</CodeHighlight>
</code></pre>
<h5>Sizes</h5> <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>. <p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
Note that these classes are mainly be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p> Note that these classes are mainly be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt; &lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
&lt;InputText type="text" placeholder="Normal" /&gt; &lt;InputText type="text" placeholder="Normal" /&gt;
&lt;InputText type="text" class="p-inputtext-lg" placeholder="Large" /&gt; &lt;InputText type="text" class="p-inputtext-lg" placeholder="Large" /&gt;
</CodeHighlight>
</code></pre>
<p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the <p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the
class to a container element so that descendant inputs share the same style easier.</p> class to a container element so that descendant inputs share the same style easier.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-inputtext-sm"&gt; &lt;div class="p-inputtext-sm"&gt;
&lt;InputText /&gt; &lt;InputText /&gt;
&lt;InputNumber /&gt; &lt;InputNumber /&gt;
&lt;InputMask /&gt; &lt;InputMask /&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Outlined vs Filled</h5> <h5>Outlined vs Filled</h5>
<p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color <p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer
to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p> to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;div class="p-input-filled"&gt; &lt;div class="p-input-filled"&gt;
&lt;InputText type="text" /&gt; &lt;InputText type="text" /&gt;
&lt;InputText type="text" /&gt; &lt;InputText type="text" /&gt;
&lt;InputText type="text" /&gt; &lt;InputText type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</p> <p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</p>
@ -140,8 +154,8 @@ import InputText from 'primevue/inputtext';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;InputText type="text" v-model="value1" /&gt; &lt;InputText type="text" v-model="value1" /&gt;
@ -190,9 +204,10 @@ import InputText from 'primevue/inputtext';
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -204,7 +219,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Listbox from 'primevue/listbox'; import Listbox from 'primevue/listbox';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code>
<code>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt; &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
data() { data() {
return { return {
selectedCity: null, selectedCity: null,
@ -26,20 +31,23 @@ data() {
] ]
} }
} }
</CodeHighlight>
</code></pre>
<h5>Selection</h5> <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 <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 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> devices metaKeySelection is turned off automatically.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/&gt; &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/&gt;
</CodeHighlight>
</code></pre>
<h5>Custom Content</h5> <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>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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div&gt; &lt;div&gt;
@ -49,13 +57,15 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;/Listbox&gt; &lt;/Listbox&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Filter</h5> <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> <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> <pre v-code>
<code>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt; &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -229,8 +239,8 @@ data() {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/listbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/listbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Single&lt;/h5&gt; &lt;h5&gt;Single&lt;/h5&gt;
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" /&gt; &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" /&gt;
@ -244,9 +254,10 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;/Listbox&gt; &lt;/Listbox&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -274,7 +285,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import MegaMenu from 'primevue/megamenu'; import MegaMenu from 'primevue/megamenu';
</CodeHighlight>
</code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;MegaMenu :model="items" /&gt; &lt;MegaMenu :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -132,24 +137,27 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Orientation</h5> <h5>Orientation</h5>
<p>Default orientation is "horizontal" with "vertical" as the alternative.</p> <p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;MegaMenu :model="items" orientation="vertical" /&gt; &lt;MegaMenu :model="items" orientation="vertical" /&gt;
</CodeHighlight>
</code></pre>
<h5>Custom Content</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;MegaMenu :model="items"&gt; &lt;MegaMenu :model="items"&gt;
&lt;InputText placeholder="Search" type="text" /&gt; &lt;InputText placeholder="Search" type="text" /&gt;
&lt;Button label="Logout" icon="pi pi-power-off" /&gt; &lt;Button label="Logout" icon="pi pi-power-off" /&gt;
&lt;/MegaMenu&gt; &lt;/MegaMenu&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -247,17 +255,18 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Horizontal&lt;/h3&gt; &lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;MegaMenu :model="items" /&gt; &lt;MegaMenu :model="items" /&gt;
&lt;h3&gt;Vertical&lt;/h3&gt; &lt;h3&gt;Vertical&lt;/h3&gt;
&lt;MegaMenu :model="items" orientation="vertical"/&gt; &lt;MegaMenu :model="items" orientation="vertical"/&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -376,7 +385,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,20 +3,25 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Menu from 'primevue/menu'; import Menu from 'primevue/menu';
</CodeHighlight>
</code></pre>
<h5>MenuModel</h5> <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> <p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Menu requires a collection of menuitems as its model.</p> <p>Menu requires a collection of menuitems as its model.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Menu :model="items" /&gt; &lt;Menu :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -49,11 +54,13 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>SubMenus</h5> <h5>SubMenus</h5>
<p>Menu supports one level of nesting via subitems of an item.</p> <p>Menu supports one level of nesting via subitems of an item.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
const items: [ const items: [
{ {
label: 'Options', label: 'Options',
@ -66,21 +73,26 @@ const items: [
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ] {label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
} }
]; ];
</CodeHighlight>
</code></pre>
<h5>Popup Mode</h5> <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> <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> <pre v-code>
<code>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;Menu ref="menu" :model="items" :popup="true" /&gt; &lt;Menu ref="menu" :model="items" :popup="true" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
toggle(event) { toggle(event) {
this.$refs.menu.toggle(event); this.$refs.menu.toggle(event);
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -203,8 +215,8 @@ toggle(event) {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt; &lt;h3&gt;Inline&lt;/h3&gt;
&lt;Menu :model="items" /&gt; &lt;Menu :model="items" /&gt;
@ -212,9 +224,10 @@ toggle(event) {
&lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /&gt; &lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /&gt;
&lt;Menu id="overlay_menu" ref="menu" :model="items" :popup="true" /&gt; &lt;Menu id="overlay_menu" ref="menu" :model="items" :popup="true" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -261,7 +274,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,20 +3,25 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Menubar from 'primevue/menubar'; import Menubar from 'primevue/menubar';
</CodeHighlight>
</code></pre>
<h5>MenuModel</h5> <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> <p>Menubar uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Menubar requires a collection of menuitems as its model.</p> <p>Menubar requires a collection of menuitems as its model.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Menubar :model="items" /&gt; &lt;Menubar :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -151,12 +156,13 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Custom Content</h5> <h5>Custom Content</h5>
<p>Two slots named "start" and "end" are provided to embed content before or after the menubar.</p> <p>Two slots named "start" and "end" are provided to embed content before or after the menubar.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Menubar :model="items"&gt; &lt;Menubar :model="items"&gt;
&lt;template #start&gt; &lt;template #start&gt;
Before Before
@ -166,7 +172,7 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Menubar&gt; &lt;/Menubar&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -242,8 +248,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Menubar :model="items"&gt; &lt;Menubar :model="items"&gt;
&lt;template #start&gt; &lt;template #start&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2"&gt; &lt;img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2"&gt;
@ -254,9 +260,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Menubar&gt; &lt;/Menubar&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -391,7 +398,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -6,7 +6,8 @@
<h5>MenuItem</h5> <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> <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"> <pre v-code.script>
<code>
const items: [ const items: [
{ {
label: 'Options', label: 'Options',
@ -19,7 +20,8 @@ const items: [
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ] {label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
} }
]; ];
</CodeHighlight>
</code></pre>
<p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p> <p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p>
@ -112,7 +114,8 @@ const items: [
<h5>Command</h5> <h5>Command</h5>
<p>The function to invoke when an item is clicked is defined using the command property.</p> <p>The function to invoke when an item is clicked is defined using the command property.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
const items = [ const items = [
{ {
label: 'New', label: 'New',
@ -123,11 +126,13 @@ const items = [
} }
} }
]; ];
</CodeHighlight>
</code></pre>
<h5>Navigation</h5> <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> <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"> <pre v-code.script>
<code>
const items = [ const items = [
{ {
label: 'Internal', label: 'Internal',
@ -140,12 +145,14 @@ const items = [
url: 'https://www.primefaces.org/primevue' url: 'https://www.primefaces.org/primevue'
} }
]; ];
</CodeHighlight>
</code></pre>
<h5>Visibility</h5> <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 <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> to implement such cases by supporting functions that returns booleans or simple booleans.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
const items = [ const items = [
{ {
label: 'Remove', label: 'Remove',
@ -156,7 +163,8 @@ const items = [
visible: () => this.isUserAdmin() visible: () => this.isUserAdmin()
} }
]; ];
</CodeHighlight>
</code></pre>
</div> </div>
</div> </div>
</template> </template>

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

@ -3,25 +3,30 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Message from 'primevue/message'; import Message from 'primevue/message';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Message component requires a content to display.</p> <p>Message component requires a content to display.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt; &lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt;
</CodeHighlight>
</code></pre>
<p>Multiple messages can be displayed using the standard v-for directive.</p> <p>Multiple messages can be displayed using the standard v-for directive.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt; &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
data() { data() {
return { return {
messages: [ messages: [
@ -31,7 +36,8 @@ data() {
] ]
} }
} }
</CodeHighlight>
</code></pre>
<h5>Severities</h5> <h5>Severities</h5>
<p>There are four possible values for the severity of a message. Default one is "info".</p> <p>There are four possible values for the severity of a message. Default one is "info".</p>
@ -45,27 +51,35 @@ data() {
<h5>Closable</h5> <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> <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> <pre v-code>
<code>
&lt;Message severity="success" :closable="false"&gt;Order Submitted&lt;/Message&gt; &lt;Message severity="success" :closable="false"&gt;Order Submitted&lt;/Message&gt;
</CodeHighlight>
</code></pre>
<h5>Sticky</h5> <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 <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> should be displayed which is 3000 ms by default.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt; &lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
</CodeHighlight>
</code></pre>
<h5>Inline Message Component</h5> <h5>Inline Message Component</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import InlineMessage from 'primevue/inlinemessage'; import InlineMessage from 'primevue/inlinemessage';
</CodeHighlight>
</code></pre>
<p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p> <p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;InputText placeholder="Username" class="p-invalid" /&gt; &lt;InputText placeholder="Username" class="p-invalid" /&gt;
&lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt; &lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
</CodeHighlight>
</code></pre>
<h5>Properties of Message</h5> <h5>Properties of Message</h5>
@ -229,8 +243,8 @@ import InlineMessage from 'primevue/inlinemessage';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/message" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/message" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Severities&lt;/h5&gt; &lt;h5&gt;Severities&lt;/h5&gt;
&lt;Message severity="success"&gt;Success Message Content&lt;/Message&gt; &lt;Message severity="success"&gt;Success Message Content&lt;/Message&gt;
&lt;Message severity="info"&gt;Info Message Content&lt;/Message&gt; &lt;Message severity="info"&gt;Info Message Content&lt;/Message&gt;
@ -258,9 +272,10 @@ import InlineMessage from 'primevue/inlinemessage';
&lt;InlineMessage /&gt; &lt;InlineMessage /&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -278,9 +293,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
button.p-button { button.p-button {
margin-right: .5rem; margin-right: .5rem;
} }
@ -288,7 +305,8 @@ button.p-button {
.p-inputtext { .p-inputtext {
margin-right: .25rem; margin-right: .25rem;
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import MultiSelect from 'primevue/multiselect'; import MultiSelect from 'primevue/multiselect';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code>
<code>
&lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt; &lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
data() { data() {
return { return {
selectedCars: null, selectedCars: null,
@ -30,13 +35,14 @@ data() {
] ]
} }
} }
</CodeHighlight>
</code></pre>
<h5>Custom Content</h5> <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>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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt; &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt; &lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
@ -55,13 +61,15 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;/MultiSelect&gt; &lt;/MultiSelect&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Filter</h5> <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> <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> <pre v-code>
<code>
&lt;MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/&gt; &lt;MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -309,8 +317,8 @@ data() {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/multiselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/multiselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" /&gt; &lt;MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
@ -333,9 +341,10 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;/MultiSelect&gt; &lt;/MultiSelect&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -363,9 +372,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.p-multiselect { .p-multiselect {
min-width: 15rem; min-width: 15rem;
} }
@ -389,7 +400,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,19 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import OrderList from 'primevue/orderlist'; import OrderList from 'primevue/orderlist';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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>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 <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. <i>item</i> and the <i>index</i> via slotProps.
</p> </p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt; &lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
&lt;template #header&gt; &lt;template #header&gt;
List of Cars List of Cars
@ -29,7 +31,7 @@ import OrderList from 'primevue/orderlist';
&lt;/template&gt; &lt;/template&gt;
&lt;/OrderList&gt; &lt;/OrderList&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Selection</h5> <h5>Selection</h5>
<p>In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that <p>In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that
@ -38,8 +40,8 @@ import OrderList from 'primevue/orderlist';
<p>Use the v-model directive to enable two-way binding.</p> <p>Use the v-model directive to enable two-way binding.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;OrderList v-model="cars" dataKey="vin" v-model:selection="selection"&gt; &lt;OrderList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
&lt;template #header&gt; &lt;template #header&gt;
List of Cars List of Cars
@ -55,7 +57,7 @@ import OrderList from 'primevue/orderlist';
&lt;/template&gt; &lt;/template&gt;
&lt;/OrderList&gt; &lt;/OrderList&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>DataKey</h5> <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> <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>
@ -168,8 +170,8 @@ import OrderList from 'primevue/orderlist';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/orderlist" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/orderlist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;OrderList v-model="products" listStyle="height:auto" dataKey="id"&gt; &lt;OrderList v-model="products" listStyle="height:auto" dataKey="id"&gt;
&lt;template #header&gt; &lt;template #header&gt;
List of Products List of Products
@ -192,9 +194,10 @@ import OrderList from 'primevue/orderlist';
&lt;/template&gt; &lt;/template&gt;
&lt;/OrderList&gt; &lt;/OrderList&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -211,9 +214,11 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.product-item { .product-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -262,7 +267,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,23 +3,26 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import OrganizationChart from 'primevue/organizationchart'; import OrganizationChart from 'primevue/organizationchart';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;OrganizationChart :value="data"&gt; &lt;OrganizationChart :value="data"&gt;
&lt;template #default="slotProps"&gt; &lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrganizationChart&gt; &lt;/OrganizationChart&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -60,7 +63,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>OrganizationChartNode</h5> <h5>OrganizationChartNode</h5>
<p>API of the OrganizationChartNode has the properties below.</p> <p>API of the OrganizationChartNode has the properties below.</p>
@ -128,17 +132,18 @@ export default {
<p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the <p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the
key of the node and value is true. key of the node and value is true.
</p> </p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt; &lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt;
&lt;template #default="slotProps"&gt; &lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrganizationChart&gt; &lt;/OrganizationChart&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -182,22 +187,24 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Selection</h5> <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 <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> selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;OrganizationChart :value="data" selecionMode="single" :selectionKeys.sync="selectionKeys"&gt; &lt;OrganizationChart :value="data" selecionMode="single" :selectionKeys.sync="selectionKeys"&gt;
&lt;template #default="slotProps"&gt; &lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrganizationChart&gt; &lt;/OrganizationChart&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -239,13 +246,14 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Templating</h5> <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> <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> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;OrganizationChart :value="data"&gt; &lt;OrganizationChart :value="data"&gt;
&lt;template #person="slotProps"&gt; &lt;template #person="slotProps"&gt;
&lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt; &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
@ -259,9 +267,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/OrganizationChart&gt; &lt;/OrganizationChart&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -348,7 +357,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -483,8 +493,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/organizationchart" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/organizationchart" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Advanced&lt;/h3&gt; &lt;h3&gt;Advanced&lt;/h3&gt;
&lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection" &lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt; @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt;
@ -507,9 +517,10 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/OrganizationChart&gt; &lt;/OrganizationChart&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -645,9 +656,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
::v-deep(.p-organizationchart) { ::v-deep(.p-organizationchart) {
.p-person { .p-person {
padding: 0; padding: 0;
@ -687,7 +700,8 @@ export default {
color: #ffffff; color: #ffffff;
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,34 +3,42 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import OverlayPanel from 'primevue/overlaypanel'; import OverlayPanel from 'primevue/overlaypanel';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p> <p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;OverlayPanel ref="op"&gt; &lt;OverlayPanel ref="op"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
toggle(event) { toggle(event) {
this.$refs.op.toggle(event); this.$refs.op.toggle(event);
} }
</CodeHighlight>
</code></pre>
<h5>Dismissable and CloseIcon</h5> <h5>Dismissable and CloseIcon</h5>
<p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. <p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior.
Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p> Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt; &lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -150,8 +158,8 @@ toggle(event) {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/overlaypanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/overlaypanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt; &lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt; &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
@ -170,9 +178,10 @@ toggle(event) {
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -202,7 +211,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,39 +3,51 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Paginator from 'primevue/paginator'; import Paginator from 'primevue/paginator';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p> <p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Paginator :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt; &lt;Paginator :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
</code></pre>
<h5>Start Index</h5> <h5>Start Index</h5>
<p><i>first</i> property defines the index of the first item displayed by the paginator.</p> <p><i>first</i> property defines the index of the first item displayed by the paginator.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Paginator :first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt; &lt;Paginator :first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
</code></pre>
<p>Use the sync operator to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p> <p>Use the sync operator to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt; &lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
</code></pre>
<h5>Rows Per Page</h5> <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> <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> <pre v-code>
<code>
&lt;Paginator :first.sync="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt; &lt;Paginator :first.sync="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
</CodeHighlight>
</code></pre>
<p>As <i>rows</i> also change when the dropdown changes, use the optional sync operator if you need two-way binding.</p> <p>As <i>rows</i> also change when the dropdown changes, use the optional sync operator if you need two-way binding.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt; &lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
</CodeHighlight>
</code></pre>
<h5>Template</h5> <h5>Template</h5>
<p>Paginator elements can be customized using the template property using the predefined keys, default value is <p>Paginator elements can be customized using the template property using the predefined keys, default value is
@ -69,8 +81,8 @@ import Paginator from 'primevue/paginator';
<p>There are two templates available named "left" and "right" to add custom content to these locations. Both templates get <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. a state object as a slot property to provide the current page, first index and the rows.
</p> </p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt; &lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
&lt;template #left="slotProps"&gt; &lt;template #left="slotProps"&gt;
Page: &#123;&#123;slotProps.state.page&#125;&#125; Page: &#123;&#123;slotProps.state.page&#125;&#125;
@ -82,22 +94,26 @@ import Paginator from 'primevue/paginator';
&lt;/template&gt; &lt;/template&gt;
&lt;/Paginator&gt; &lt;/Paginator&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Page Change Event</h5> <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> <p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt; &lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
onPage(event) { onPage(event) {
//event.page: New page number //event.page: New page number
//event.first: Index of first record //event.first: Index of first record
//event.rows: Number of rows to display in new page //event.rows: Number of rows to display in new page
//event.pageCount: Total number of pages //event.pageCount: Total number of pages
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -244,7 +260,8 @@ onPage(event) {
<a href="https://github.com/primefaces/primevue/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<code>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt; &lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
@ -262,9 +279,11 @@ onPage(event) {
&lt;div class="image-gallery"&gt; &lt;div class="image-gallery"&gt;
&lt;img :src="'demo/images/nature/' + image + '.jpg'" /&gt; &lt;img :src="'demo/images/nature/' + image + '.jpg'" /&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -284,9 +303,11 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
.p-button.p-button-icon-only { .p-button.p-button-icon-only {
border-radius: 0; border-radius: 0;
} }
@ -295,7 +316,8 @@ export default {
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

54
src/views/panel/PanelDoc.vue
View File

@ -3,63 +3,76 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Panel from 'primevue/panel'; import Panel from 'primevue/panel';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Panel is a container component that accepts content as its children.</p> <p>Panel is a container component that accepts content as its children.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Panel header="Header"&gt; &lt;Panel header="Header"&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&lt;/Panel&gt; &lt;/Panel&gt;
</CodeHighlight>
</code></pre>
<h5>Custom Header</h5> <h5>Custom Header</h5>
<p>Header of the panel is either defined with the <i>header</i> property or the header template.</p> <p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Panel&gt; &lt;Panel&gt;
&lt;template #header&gt; &lt;template #header&gt;
Header Content Header Content
&lt;/template&gt; &lt;/template&gt;
Content Content
&lt;/Panel&gt; &lt;/Panel&gt;
</CodeHighlight>
</code></pre>
<h5>Toggleable</h5> <h5>Toggleable</h5>
<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p> <p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Panel header="Header" :toggleable="true"&gt; &lt;Panel header="Header" :toggleable="true"&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&lt;/Panel&gt; &lt;/Panel&gt;
</CodeHighlight>
</code></pre>
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p> <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt; &lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt;
Content Content
&lt;/Panel&gt; &lt;/Panel&gt;
</CodeHighlight>
</code></pre>
<p>Use the sync operator to enable two-way binding.</p> <p>Use the sync operator to enable two-way binding.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt; &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
&lt;Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt; &lt;Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
Content Content
&lt;/Panel&gt; &lt;/Panel&gt;
</CodeHighlight>
</code></pre>
<h5>Custom Icons</h5> <h5>Custom Icons</h5>
<p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-header-icon</i> <p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-header-icon</i>
class to your icons.</p> class to your icons.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;h5&gt;Advanced&lt;/h5&gt; &lt;h5&gt;Advanced&lt;/h5&gt;
&lt;Panel header="Header"&gt; &lt;Panel header="Header"&gt;
&lt;template #icons&gt; &lt;template #icons&gt;
@ -69,7 +82,8 @@ import Panel from 'primevue/panel';
&lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt; &lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -176,8 +190,8 @@ import Panel from 'primevue/panel';
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h5&gt;Regular&lt;/h5&gt; &lt;h5&gt;Regular&lt;/h5&gt;
&lt;Panel header="Header"&gt; &lt;Panel header="Header"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -200,9 +214,10 @@ import Panel from 'primevue/panel';
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt; cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -249,7 +264,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,20 +3,25 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PanelMenu from 'primevue/panelmenu'; import PanelMenu from 'primevue/panelmenu';
</CodeHighlight>
</code></pre>
<h5>MenuModel</h5> <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> <p>PanelMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>PanelMenu requires a collection of menuitems as its model.</p> <p>PanelMenu requires a collection of menuitems as its model.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;PanelMenu :model="items" /&gt; &lt;PanelMenu :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -140,7 +145,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -220,13 +226,14 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;PanelMenu :model="items" /&gt; &lt;PanelMenu :model="items" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -350,7 +357,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,15 +3,19 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import Password from 'primevue/password'; import Password from 'primevue/password';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p> <p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;Password v-model="value" /&gt; &lt;Password v-model="value" /&gt;
</CodeHighlight>
</code></pre>
<h5>Customization</h5> <h5>Customization</h5>
<p>Password components uses regular expressions for middle and strong passwords with the following defaults.</p> <p>Password components uses regular expressions for middle and strong passwords with the following defaults.</p>
@ -138,11 +142,14 @@ import Password from 'primevue/password';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/password" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/password" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<code>
&lt;Password v-model="value" /&gt; &lt;Password v-model="value" /&gt;
</CodeHighlight>
<CodeHighlight lang="javascript"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -150,7 +157,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,15 +3,17 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import PickList from 'primevue/picklist'; import PickList from 'primevue/picklist';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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 <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> that gets the <i>item</i> instance and the <i>index</i> via slotProps.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;PickList v-model="cars" dataKey="vin"&gt; &lt;PickList v-model="cars" dataKey="vin"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
@ -24,12 +26,12 @@ import PickList from 'primevue/picklist';
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Templates</h5> <h5>Templates</h5>
<p>In addition to the mandatory "item" template, picklist provides "sourceHeader" and "targetHeader" slots as optional templates.</p> <p>In addition to the mandatory "item" template, picklist provides "sourceHeader" and "targetHeader" slots as optional templates.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;PickList v-model="cars" dataKey="vin"&gt; &lt;PickList v-model="cars" dataKey="vin"&gt;
&lt;template #sourceHeader&gt; &lt;template #sourceHeader&gt;
Available Available
@ -48,15 +50,15 @@ import PickList from 'primevue/picklist';
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Selection</h5> <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 v-model directive so that <p>In case you need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that
it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well. Note that 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> this is optional and only necessary when you need to access the selection.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt; &lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
@ -69,7 +71,7 @@ import PickList from 'primevue/picklist';
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>DataKey</h5> <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> <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>
@ -227,8 +229,8 @@ import PickList from 'primevue/picklist';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/picklist" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/picklist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;PickList v-model="products" listStyle="height:342px" dataKey="id"&gt; &lt;PickList v-model="products" listStyle="height:342px" dataKey="id"&gt;
&lt;template #sourceHeader&gt; &lt;template #sourceHeader&gt;
Available Available
@ -254,9 +256,10 @@ import PickList from 'primevue/picklist';
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
export default { export default {
@ -273,9 +276,11 @@ export default {
this.productService.getProductsSmall().then(data => this.products = [data, []]); this.productService.getProductsSmall().then(data => this.products = [data, []]);
} }
} }
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
product-item { product-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -324,7 +329,8 @@ product-item {
} }
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

30
src/views/primeflex/PrimeFlexSetup.vue
View File

@ -8,20 +8,25 @@
<h5>Download</h5> <h5>Download</h5>
<p>PrimeFlex is available at <a href="https://www.npmjs.com/package/primeflex">npm</a>, if you have an existing application run the following commands to install it.</p> <p>PrimeFlex is available at <a href="https://www.npmjs.com/package/primeflex">npm</a>, if you have an existing application run the following commands to install it.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
npm install primeflex --save npm install primeflex --save
</CodeHighlight>
</code></pre>
<h5>Import</h5> <h5>Import</h5>
<p>Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.</p> <p>Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.</p>
<CodeHighlight lang="css"> <pre v-code.css>
<code>
import 'primeflex/primeflex.css'; import 'primeflex/primeflex.css';
</CodeHighlight>
</code></pre>
<p>PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli <p>PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli
that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.</p> that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.</p>
<CodeHighlight lang="css"> <pre v-code.css>
<code>
import 'primeflex/src/_variables.scss'; import 'primeflex/src/_variables.scss';
import 'primeflex/src/_grid.scss'; import 'primeflex/src/_grid.scss';
import 'primeflex/src/_formlayout.scss'; import 'primeflex/src/_formlayout.scss';
@ -30,7 +35,8 @@ import 'primeflex/src/_text.scss';
import 'primeflex/src/flexbox/_flexbox.scss'; import 'primeflex/src/flexbox/_flexbox.scss';
import 'primeflex/src/_spacing.scss'; import 'primeflex/src/_spacing.scss';
import 'primeflex/src/_elevation.scss'; import 'primeflex/src/_elevation.scss';
</CodeHighlight>
</code></pre>
<h5>Variables</h5> <h5>Variables</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -97,14 +103,17 @@ import 'primeflex/src/_elevation.scss';
</p> </p>
<p><b>_overrides.scss</b></p> <p><b>_overrides.scss</b></p>
<CodeHighlight lang="css"> <pre v-code.css>
<code>
$sm:640px; $sm:640px;
$md:720px; $md:720px;
$lg:960px; $lg:960px;
$xl:1080px; $xl:1080px;
</CodeHighlight>
<CodeHighlight lang="css"> </code></pre>
<pre v-code.css>
<code>
import './assets/_overrides.scss'; import './assets/_overrides.scss';
import 'primeflex/src/_variables.css'; import 'primeflex/src/_variables.css';
import 'primeflex/src/_grid.css'; import 'primeflex/src/_grid.css';
@ -114,7 +123,8 @@ import 'primeflex/src/_text.css';
import 'primeflex/src/flexbox/_flexbox.css'; import 'primeflex/src/flexbox/_flexbox.css';
import 'primeflex/src/_spacing.css'; import 'primeflex/src/_spacing.css';
import 'primeflex/src/_elevation.css'; import 'primeflex/src/_elevation.css';
</CodeHighlight>
</code></pre>
</div> </div>
</div> </div>
</template> </template>

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

@ -3,37 +3,45 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProgressBar from 'primevue/progressbar'; import ProgressBar from 'primevue/progressbar';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <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> <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> <pre v-code>
<code>
&lt;ProgressBar :value="value" /&gt; &lt;ProgressBar :value="value" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
data() { data() {
return { return {
value: 0 value: 0
} }
} }
</CodeHighlight>
</code></pre>
<p>Indeterminate is simplly enabled using <i>mode</i> property.</p> <p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;ProgressBar mode="indeterminate"/&gt; &lt;ProgressBar mode="indeterminate"/&gt;
</CodeHighlight>
</code></pre>
<h5>Slot</h5> <h5>Slot</h5>
<p>A custom label can be placed inside the progress bar via the default slot.</p> <p>A custom label can be placed inside the progress bar via the default slot.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;ProgressBar :value="value"&gt; &lt;ProgressBar :value="value"&gt;
Percent Complete: &#123;&#123;value&#125;&#125;% Percent Complete: &#123;&#123;value&#125;&#125;%
&lt;/ProgressBar&gt; &lt;/ProgressBar&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -112,8 +120,8 @@ data() {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/prograssbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/prograssbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Dynamic&lt;/h3&gt; &lt;h3&gt;Dynamic&lt;/h3&gt;
&lt;ProgressBar :value="value1" /&gt; &lt;ProgressBar :value="value1" /&gt;
@ -123,9 +131,10 @@ data() {
&lt;h3&gt;Indeterminate&lt;/h3&gt; &lt;h3&gt;Indeterminate&lt;/h3&gt;
&lt;ProgressBar mode="indeterminate" style="height: .5em" /&gt; &lt;ProgressBar mode="indeterminate" style="height: .5em" /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -156,7 +165,8 @@ export default {
this.endProgress(); this.endProgress();
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,21 +3,24 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import ProgressSpinner from 'primevue/progressspinner'; import ProgressSpinner from 'primevue/progressspinner';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>ProgressSpinner is defined using ProgressSpinner element.</p> <p>ProgressSpinner is defined using ProgressSpinner element.</p>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;ProgressSpinner /&gt; &lt;ProgressSpinner /&gt;
</template> </template>
</CodeHighlight> </code></pre>
<h5>Colors</h5> <h5>Colors</h5>
<p>Colors of the spinner can be changed by overriding the keyframes animation.</p> <p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
<CodeHighlight lang="css"> <pre v-code.css>
<code>
@keyframes ui-progress-spinner-color { @keyframes ui-progress-spinner-color {
100%, 100%,
0% { 0% {
@ -34,7 +37,8 @@ import ProgressSpinner from 'primevue/progressspinner';
stroke: #ffa700; stroke: #ffa700;
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -106,15 +110,15 @@ import ProgressSpinner from 'primevue/progressspinner';
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;ProgressSpinner /&gt; &lt;ProgressSpinner /&gt;
&lt;h3&gt;Custom&lt;/h3&gt; &lt;h3&gt;Custom&lt;/h3&gt;
&lt;ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/&gt; &lt;ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/&gt;
</template> </template>
</CodeHighlight> </code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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

@ -3,17 +3,22 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
import RadioButton from 'primevue/radiobutton'; import RadioButton from 'primevue/radiobutton';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Two-way value binding is defined using the standard v-model directive.</p> <p>Two-way value binding is defined using the standard v-model directive.</p>
<CodeHighlight> <pre v-code>
<code>
&lt;RadioButton name="city" value="Chicago" v-model="city" /&gt; &lt;RadioButton name="city" value="Chicago" v-model="city" /&gt;
&lt;RadioButton name="city" value="Los Angeles" v-model="city" /&gt; &lt;RadioButton name="city" value="Los Angeles" v-model="city" /&gt;
</CodeHighlight>
<CodeHighlight lang="js"> </code></pre>
<pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -21,9 +26,11 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<p>As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.</p> <p>As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.</p>
<CodeHighlight lang="js"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -31,7 +38,8 @@ export default {
} }
} }
} }
</CodeHighlight>
</code></pre>
<h5>Properties</h5> <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> <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>
@ -104,8 +112,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/radiobutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/radiobutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <pre v-code>
<template v-pre> <code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div class="p-field-radiobutton"&gt; &lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt; &lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt;
@ -130,9 +138,10 @@ export default {
&lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt; &lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </code></pre>
<CodeHighlight lang="javascript"> <pre v-code.script>
<code>
export default { export default {
data() { data() {
return { return {
@ -145,7 +154,8 @@ export default {
this.selectedCategory = this.categories[1]; this.selectedCategory = this.categories[1];
} }
} }
</CodeHighlight>
</code></pre>
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>

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