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

Add cards

pull/345/head
cagataycivici 2020-06-18 11:58:07 +03:00
parent 53c78c054b
commit 91014b11e5
129 changed files with 2992 additions and 2653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppMenu.vue
View File

@ -14,6 +14,7 @@
<div class="menu-items">
<router-link to="/icons">Icons</router-link>
<router-link to="/flexgrid">Grid System</router-link>
<router-link to="/formlayout">FormLayout</router-link>
<router-link to="/elevation">Elevation</router-link>
<router-link to="/spacing">Spacing</router-link>
</div>
@ -32,7 +33,6 @@
<router-link to="/inputnumber">InputNumber</router-link>
<router-link to="/inputswitch">InputSwitch</router-link>
<router-link to="/inputtext">InputText</router-link>
<router-link to="/formlayout">FormLayout</router-link>
<router-link to="/listbox">Listbox</router-link>
<router-link to="/multiselect">MultiSelect</router-link>
<router-link to="/password">Password</router-link>

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

@ -8,102 +8,110 @@
</div>
<div class="content-section implementation">
<h5>Default</h5>
<Accordion>
<AccordionTab header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
<h5>Multiple</h5>
<Accordion :multiple="true">
<AccordionTab header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
<AccordionTab header="Godfather IV" :disabled="true">
</AccordionTab>
</Accordion>
<h5>Programmatic</h5>
<div style="padding: .5em 0 1em 0">
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
<div class="card">
<h5>Default</h5>
<Accordion>
<AccordionTab header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
</div>
<Accordion :multiple="true">
<AccordionTab header="Godfather I" :active="active1">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II" :active="active2">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III" :active="active3">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
<div class="card">
<h5>Multiple</h5>
<Accordion :multiple="true">
<AccordionTab header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
<AccordionTab header="Godfather IV" :disabled="true">
</AccordionTab>
</Accordion>
</div>
<h5>Custom Headers</h5>
<Accordion class="accordion-custom">
<AccordionTab>
<template slot="header">
<i class="pi pi-calendar"></i>
<span>Godfather I</span>
</template>
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab>
<template slot="header">
<i class="pi pi-user"></i>
<span>Godfather II</span>
</template>
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab>
<template slot="header">
<i class="pi pi-search"></i>
<span>Godfather III</span>
<i class="pi pi-cog"></i>
</template>
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
<div class="card">
<h5>Programmatic</h5>
<div style="padding: .5em 0 1em 0">
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
</div>
<Accordion :multiple="true">
<AccordionTab header="Godfather I" :active="active1">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II" :active="active2">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III" :active="active3">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
</div>
<div class="card">
<h5>Custom Headers</h5>
<Accordion class="accordion-custom">
<AccordionTab>
<template slot="header">
<i class="pi pi-calendar"></i>
<span>Godfather I</span>
</template>
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
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, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab>
<template slot="header">
<i class="pi pi-user"></i>
<span>Godfather II</span>
</template>
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab>
<template slot="header">
<i class="pi pi-search"></i>
<span>Godfather III</span>
<i class="pi pi-cog"></i>
</template>
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
</div>
</div>
<AccordionDoc/>

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

@ -8,28 +8,30 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
<div class="card">
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
<h5>Dropdown and Templating</h5>
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Search car brands" :dropdown="true">
<template #item="slotProps">
<div class="p-autocomplete-brand-item">
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
<div>{{slotProps.item}}</div>
</div>
</template>
</AutoComplete>
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
<h5>Dropdown and Templating</h5>
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Search car brands" :dropdown="true">
<template #item="slotProps">
<div class="p-autocomplete-brand-item">
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
<div>{{slotProps.item}}</div>
</div>
</template>
</AutoComplete>
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
</span>
<ul>
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
</ul>
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
</span>
<ul>
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
</ul>
</div>
</div>
<AutoCompleteDoc />

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

@ -8,53 +8,55 @@
</div>
<div class="content-section implementation">
<h5>Numbers</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-success">8</span>
<span class="p-badge p-badge-info">4</span>
<span class="p-badge p-badge-warning">12</span>
<span class="p-badge p-badge-danger">3</span>
</div>
<div class="card">
<h5>Numbers</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-success">8</span>
<span class="p-badge p-badge-info">4</span>
<span class="p-badge p-badge-warning">12</span>
<span class="p-badge p-badge-danger">3</span>
</div>
<h5>Tags</h5>
<div class="badges">
<span class="p-tag">Primary</span>
<span class="p-tag p-tag-success">Success</span>
<span class="p-tag p-tag-info">Info</span>
<span class="p-tag p-tag-warning">Warning</span>
<span class="p-tag p-tag-danger">Danger</span>
</div>
<h5>Tags</h5>
<div class="badges">
<span class="p-tag">Primary</span>
<span class="p-tag p-tag-success">Success</span>
<span class="p-tag p-tag-info">Info</span>
<span class="p-tag p-tag-warning">Warning</span>
<span class="p-tag p-tag-danger">Danger</span>
</div>
<h5>Pills</h5>
<div class="badges">
<span class="p-tag p-tag-rounded">Primary</span>
<span class="p-tag p-tag-rounded p-tag-success">Success</span>
<span class="p-tag p-tag-rounded p-tag-info">Info</span>
<span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
<span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
</div>
<h5>Pills</h5>
<div class="badges">
<span class="p-tag p-tag-rounded">Primary</span>
<span class="p-tag p-tag-rounded p-tag-success">Success</span>
<span class="p-tag p-tag-rounded p-tag-info">Info</span>
<span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
<span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
</div>
<h5>Positioned Badge</h5>
<span class="p-overlay-badge">
<span class="p-badge">2</span>
<i class="pi pi-bell" style="font-size: 2em"></i>
</span>
<h5>Positioned Badge</h5>
<span class="p-overlay-badge">
<span class="p-badge">2</span>
<i class="pi pi-bell" style="font-size: 2em"></i>
</span>
<span class="p-overlay-badge">
<span class="p-badge p-badge-warning">5</span>
<Button type="button" label="New" />
</span>
<span class="p-overlay-badge">
<span class="p-badge p-badge-warning">5</span>
<Button type="button" label="New" />
</span>
<h5>Inline Button Badge</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Inline Button Badge</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Sizes</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-lg p-badge-sucess">4</span>
<span class="p-badge p-badge-xl p-badge-warning">6</span>
<h5>Sizes</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-lg p-badge-sucess">4</span>
<span class="p-badge p-badge-xl p-badge-warning">6</span>
</div>
</div>
</div>

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

@ -8,23 +8,25 @@
</div>
<div class="content-section implementation">
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
<div class="card">
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
<Button type="button" label="Block" @click="blockDocument()"></Button>
<Button type="button" label="Block" @click="blockDocument()"></Button>
<h5>Panel</h5>
<Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
<h5>Panel</h5>
<Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
<BlockUI :blocked="blockedPanel">
<Panel header="Godfather I" style="margin-top: 20px">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
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.</p>
</Panel>
</BlockUI>
<BlockUI :blocked="blockedPanel">
<Panel header="Godfather I" style="margin-top: 20px">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
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.</p>
</Panel>
</BlockUI>
</div>
</div>
<BlockUIDoc />

4
src/views/breadcrumb/BreadcrumbDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<Breadcrumb :home="home" :model="items" />
<div class="card">
<Breadcrumb :home="home" :model="items" />
</div>
</div>
<BreadcrumbDoc />

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

@ -8,68 +8,70 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Submit" disabled="disabled" />
<div class="card">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Submit" disabled="disabled" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<Button label="Link" class="p-button-link" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<Button label="Link" class="p-button-link" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-lock" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-lock" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-lock" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-lock" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
</div>
</div>

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

@ -8,77 +8,79 @@
</div>
<div class="content-section implementation">
<h5>Popup</h5>
<div class=" p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" />
<div class="card">
<h5>Popup</h5>
<div class=" p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="icon">Icon</label>
<Calendar id="icon" v-model="date3" :showIcon="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="spanish">Spanish</label>
<Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="minmax">MinMax</label>
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="navigators">Navigators</label>
<Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="range">Range</label>
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
<Calendar id="datetemplate" v-model="date12">
<template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
<template v-else>{{slotProps.date.day}}</template>
</template>
</Calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="touchUI">TouchUI</label>
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
</div>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="icon">Icon</label>
<Calendar id="icon" v-model="date3" :showIcon="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="spanish">Spanish</label>
<Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="minmax">MinMax</label>
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="navigators">Navigators</label>
<Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="range">Range</label>
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
<Calendar id="datetemplate" v-model="date12">
<template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
<template v-else>{{slotProps.date.day}}</template>
</template>
</Calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="touchUI">TouchUI</label>
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
</div>
</div>
<h5>Inline</h5>
<Calendar v-model="date14" :inline="true" :showWeek="true" />
<h5>Inline</h5>
<Calendar v-model="date14" :inline="true" :showWeek="true" />
</div>
</div>
<CalendarDoc />

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

@ -8,81 +8,87 @@
</div>
<div class="content-section implementation">
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h5>Basic</h5>
</template>
<template #item="slotProps">
<div class="car-item">
<div class="car-content">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" />
</div>
<div>
<div class="car-title">{{slotProps.data.brand}}</div>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div>
<div class="card">
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h5>Basic</h5>
</template>
<template #item="slotProps">
<div class="car-item">
<div class="car-content">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" />
</div>
<div>
<div class="car-title">{{slotProps.data.brand}}</div>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div>
<div class="car-buttons">
<Button icon="pi pi-search" class="p-button-secondary" />
<Button icon="pi pi-star" class="p-button-secondary" />
<Button icon="pi pi-cog" class="p-button-secondary" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
<div class="car-buttons">
<Button icon="pi pi-search" class="p-button-secondary" />
<Button icon="pi pi-star" class="p-button-secondary" />
<Button icon="pi pi-cog" class="p-button-secondary" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
</template>
<template #item="slotProps">
<div class="car-item">
<div class="car-content">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" />
</div>
<div>
<div class="car-title">{{slotProps.data.brand}}</div>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div>
<div class="card">
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
</template>
<template #item="slotProps">
<div class="car-item">
<div class="car-content">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" />
</div>
<div>
<div class="car-title">{{slotProps.data.brand}}</div>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div>
<div class="car-buttons">
<Button icon="pi pi-search" class="p-button-secondary" />
<Button icon="pi pi-star" class="p-button-secondary" />
<Button icon="pi pi-cog" class="p-button-secondary" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
<div class="car-buttons">
<Button icon="pi pi-search" class="p-button-secondary" />
<Button icon="pi pi-star" class="p-button-secondary" />
<Button icon="pi pi-cog" class="p-button-secondary" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h5>Vertical</h5>
</template>
<template #item="slotProps">
<div class="car-item">
<div class="car-content">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" />
</div>
<div>
<div class="car-title">{{slotProps.data.brand}}</div>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div>
<div class="card">
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h5>Vertical</h5>
</template>
<template #item="slotProps">
<div class="car-item">
<div class="car-content">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" />
</div>
<div>
<div class="car-title">{{slotProps.data.brand}}</div>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div>
<div class="car-buttons">
<Button icon="pi pi-search" class="p-button-secondary" />
<Button icon="pi pi-star" class="p-button-secondary" />
<Button icon="pi pi-cog" class="p-button-secondary" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
<div class="car-buttons">
<Button icon="pi pi-search" class="p-button-secondary" />
<Button icon="pi pi-star" class="p-button-secondary" />
<Button icon="pi pi-cog" class="p-button-secondary" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
</div>
<CarouselDoc/>
@ -140,7 +146,7 @@ export default {
.car-item {
.car-content {
border: 1px solid var(--layer-2);
border: 1px solid var(--surface-d);
border-radius: 3px;
margin: .3rem;
text-align: center;

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

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

7
src/views/chart/ChartDemo.vue
View File

@ -1,12 +1,5 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ChartModel</h1>
<p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
</div>
</div>
<ChartDoc/>
</div>
</template>

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

@ -1,5 +1,8 @@
<template>
<div class="content-section documentation">
<h1>ChartModel</h1>
<p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
<h5>Getting Started</h5>
<p>To begin with, charts.js package needs to be installed in your project.</p>
<CodeHighlight lang="javascript">

4
src/views/chart/ComboChartDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<Chart type="bar" :data="chartData" :options="chartOptions"/>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions"/>
</div>
</div>
<ComboChartDoc/>

4
src/views/chart/DoughnutChartDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<Chart type="doughnut" :data="chartData" :options="chartOptions" />
<div class="card">
<Chart type="doughnut" :data="chartData" :options="chartOptions" />
</div>
</div>
<DoughnutChartDoc/>

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

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

4
src/views/chart/PieChartDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<Chart type="pie" :data="chartData" :options="chartOptions" />
<div class="card">
<Chart type="pie" :data="chartData" :options="chartOptions" />
</div>
</div>
<PieChartDoc/>

4
src/views/chart/PolarAreaChartDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
<div class="card">
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
</div>
</div>
<PolarAreaChartDoc/>

4
src/views/chart/RadarChartDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<Chart type="radar" :data="chartData" :options="chartOptions" />
<div class="card">
<Chart type="radar" :data="chartData" :options="chartOptions" />
</div>
</div>
<RadarChartDoc/>

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

@ -8,37 +8,39 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<div class="card">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
<label :for="theme.key">{{theme.name}}</label>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
<label :for="theme.key">{{theme.name}}</label>
</div>
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
</div>
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
</div>
<CheckboxDoc/>

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

@ -8,21 +8,23 @@
</div>
<div class="content-section implementation p-fluid">
<h5>Basic</h5>
<Chips v-model="value1" />
<div class="card">
<h5>Basic</h5>
<Chips v-model="value1" />
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>Template</h5>
<Chips v-model="value3">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</Chips>
<h5>Template</h5>
<Chips v-model="value3">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</Chips>
</div>
</div>
<ChipsDoc />

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

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

6
src/views/contextmenu/ContextMenuDemo.vue
View File

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

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

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,52 +8,54 @@
</div>
<div class="content-section implementation">
<DataTable :value="sales">
<ColumnGroup type="header">
<Row>
<Column header="Brand" :rowspan="3" />
<Column header="Sale Rate" :colspan="4" />
</Row>
<Row>
<Column header="Sales" :colspan="2" />
<Column header="Profits" :colspan="2" />
</Row>
<Row>
<Column header="Last Year" :sortable="true" field="lastYearSale"/>
<Column header="This Year" :sortable="true" field="thisYearSale"/>
<Column header="Last Year" :sortable="true" field="lastYearProfit"/>
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
</Row>
</ColumnGroup>
<Column field="brand" />
<Column field="lastYearSale">
<template #body="slotProps">
{{slotProps.data.lastYearSale}}%
</template>
</Column>
<Column field="thisYearSale">
<template #body="slotProps">
{{slotProps.data.thisYearSale}}%
</template>
</Column>
<Column field="lastYearProfit">
<template #body="slotProps">
${{slotProps.data.lastYearProfit.toLocaleString()}}
</template>
</Column>
<Column field="thisYearProfit">
<template #body="slotProps">
${{slotProps.data.thisYearProfit.toLocaleString()}}
</template>
</Column>
<ColumnGroup type="footer">
<Row>
<Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
<Column :footer="lastYearTotal" />
<Column :footer="thisYearTotal" />
</Row>
</ColumnGroup>
</DataTable>
<div class="card">
<DataTable :value="sales">
<ColumnGroup type="header">
<Row>
<Column header="Brand" :rowspan="3" />
<Column header="Sale Rate" :colspan="4" />
</Row>
<Row>
<Column header="Sales" :colspan="2" />
<Column header="Profits" :colspan="2" />
</Row>
<Row>
<Column header="Last Year" :sortable="true" field="lastYearSale"/>
<Column header="This Year" :sortable="true" field="thisYearSale"/>
<Column header="Last Year" :sortable="true" field="lastYearProfit"/>
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
</Row>
</ColumnGroup>
<Column field="brand" />
<Column field="lastYearSale">
<template #body="slotProps">
{{slotProps.data.lastYearSale}}%
</template>
</Column>
<Column field="thisYearSale">
<template #body="slotProps">
{{slotProps.data.thisYearSale}}%
</template>
</Column>
<Column field="lastYearProfit">
<template #body="slotProps">
${{slotProps.data.lastYearProfit.toLocaleString()}}
</template>
</Column>
<Column field="thisYearProfit">
<template #body="slotProps">
${{slotProps.data.thisYearProfit.toLocaleString()}}
</template>
</Column>
<ColumnGroup type="footer">
<Row>
<Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
<Column :footer="lastYearTotal" />
<Column :footer="thisYearTotal" />
</Row>
</ColumnGroup>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

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

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

@ -8,16 +8,18 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars">
<template #header>
<div style="text-align:left">
<MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
placeholder="Select Columns" style="width: 20em"/>
</div>
</template>
<Column field="vin" header="Vin" />
<Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars">
<template #header>
<div style="text-align:left">
<MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
placeholder="Select Columns" style="width: 20em"/>
</div>
</template>
<Column field="vin" header="Vin" />
<Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<ContextMenu :model="menuModel" ref="cm" />
</div>

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

@ -8,21 +8,23 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
:paginator="true" :rows="15">
<template #header>
CRUD for Cars
</template>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
<template #footer>
<div style="text-align:left">
<Button abel="Add" icon="pi pi-plus" @click="addNewCar" />
</div>
</template>
</DataTable>
<div class="card">
<DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
:paginator="true" :rows="15">
<template #header>
CRUD for Cars
</template>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
<template #footer>
<div style="text-align:left">
<Button abel="Add" icon="pi pi-plus" @click="addNewCar" />
</div>
</template>
</DataTable>
</div>
<Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true">
<div class="p-cardialog-content">

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

@ -2426,99 +2426,95 @@ export default {
<CodeHighlight>
<template v-pre>
&lt;div class="p-card"&gt;
&lt;div class="p-card-body" style="padding:0"&gt;
&lt;DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"&gt;
&lt;template #header&gt;
&lt;div class="table-header"&gt;
List of Customers
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" /&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #empty&gt;
No customers found.
&lt;/template&gt;
&lt;template #loading&gt;
Loading customers data. Please wait.
&lt;/template&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" :sortable="true"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Name&lt;/span&gt;
&#123;&#123;slotProps.data.name&#125;&#125;
&lt;DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"&gt;
&lt;template #header&gt;
&lt;div class="table-header"&gt;
List of Customers
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" /&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #empty&gt;
No customers found.
&lt;/template&gt;
&lt;template #loading&gt;
Loading customers data. Please wait.
&lt;/template&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" :sortable="true"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Name&lt;/span&gt;
&#123;&#123;slotProps.data.name&#125;&#125;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Country&lt;/span&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" /&gt;
&lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.data.country.name&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Representative&lt;/span&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.data.representative.name&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-representative-option"&gt;
&lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
&lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.option.name&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date" :sortable="true" filterMatchMode="custom" :filterFunction="filterDate"&gt;
&lt;template #filter&gt;
&lt;Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Status&lt;/span&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;&#123;&#123;slotProps.data.status&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.option"&gt;&#123;&#123;slotProps.option&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Country&lt;/span&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" /&gt;
&lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.data.country.name&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Representative&lt;/span&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.data.representative.name&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-representative-option"&gt;
&lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
&lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.option.name&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date" :sortable="true" filterMatchMode="custom" :filterFunction="filterDate"&gt;
&lt;template #filter&gt;
&lt;Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Status&lt;/span&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;&#123;&#123;slotProps.data.status&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.option"&gt;&#123;&#123;slotProps.option&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Activity&lt;/span&gt;
&lt;ProgressBar :value="slotProps.data.activity" :showValue="false" /&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
&lt;template #body&gt;
&lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Activity&lt;/span&gt;
&lt;ProgressBar :value="slotProps.data.activity" :showValue="false" /&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
&lt;template #body&gt;
&lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>

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

@ -8,9 +8,11 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -10,69 +10,75 @@
</div>
<div class="content-section implementation">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="cars1" editMode="cell">
<Column field="vin" header="Vin">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="year" header="Year">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="brand" header="Brand">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand">
<template #option="optionProps">
<div class="p-dropdown-car-option">
<img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" />
<span>{{optionProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
</DataTable>
<div class="card">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="cars1" editMode="cell">
<Column field="vin" header="Vin">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="year" header="Year">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="brand" header="Brand">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand">
<template #option="optionProps">
<div class="p-dropdown-car-option">
<img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" />
<span>{{optionProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
</DataTable>
</div>
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
<template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" />
</template>
</Column>
</DataTable>
<div class="card">
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
<template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" />
</template>
</Column>
</DataTable>
</div>
<h5>Row Editing</h5>
<DataTable :value="cars3" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="brand" header="Brand">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="color" header="Color">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column :rowEditor="true" headerStyle="width:6em" bodyStyle="text-align:center"></Column>
</DataTable>
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="cars3" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="brand" header="Brand">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="color" header="Color">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column :rowEditor="true" headerStyle="width:6em" bodyStyle="text-align:center"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,17 +8,19 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" ref="dt">
<template #header>
<div style="text-align: left">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div>
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" ref="dt">
<template #header>
<div style="text-align: left">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div>
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,44 +8,46 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0 0"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</div>
</template>
<Column field="vin" header="Vin" filterMatchMode="startsWith">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
<div class="card">
<DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0 0"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</div>
</template>
</Column>
<Column field="year" header="Year" filterMatchMode="contains">
<template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
<Column field="vin" header="Vin" filterMatchMode="startsWith">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
</template>
</Column>
<Column field="year" header="Year" filterMatchMode="contains">
<template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
</template>
</Column>
<Column field="brand" header="Brand" filterMatchMode="equals">
<template #filter>
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color" filterMatchMode="in">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty>
No records found.
</template>
</Column>
<Column field="brand" header="Brand" filterMatchMode="equals">
<template #filter>
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color" filterMatchMode="in">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty>
No records found.
</template>
</DataTable>
</DataTable>
</div>
</div>
<div class="content-section documentation">

16
src/views/datatable/DataTableFlexScrollDemo.vue
View File

@ -1,11 +1,13 @@
<template>
<div class="content-section implementation" style="height: calc(100vh - 143px)">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="content-section implementation">
<div class="card" style="height: calc(100vh - 143px)">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
</template>

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

@ -8,18 +8,20 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" class="p-datatable-gridlines">
<template #header>
Header
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #footer>
Footer
</template>
</DataTable>
<div class="card">
<DataTable :value="cars" class="p-datatable-gridlines">
<template #header>
Header
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #footer>
Footer
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -11,13 +11,15 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,18 +8,20 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" :paginator="true" :rows="10">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #paginatorLeft>
<Button type="button" icon="pi pi-refresh" />
</template>
<template #paginatorRight>
<Button type="button" icon="pi pi-cloud" />
</template>
</DataTable>
<div class="card">
<DataTable :value="cars" :paginator="true" :rows="10">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #paginatorLeft>
<Button type="button" icon="pi pi-refresh" />
</template>
<template #paginatorRight>
<Button type="button" icon="pi pi-cloud" />
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,10 +8,12 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,35 +8,37 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" class="p-datatable-responsive-demo" :paginator="true" :rows="10" paginatorPosition="both">
<template #header>
Responsive
</template>
<Column field="vin" header="Vin">
<template #body="slotProps">
<span class="p-column-title">Vin</span>
{{slotProps.data.vin}}
<div class="card">
<DataTable :value="cars" class="p-datatable-responsive-demo" :paginator="true" :rows="10" paginatorPosition="both">
<template #header>
Responsive
</template>
</Column>
<Column field="year" header="Year">
<template #body="slotProps">
<span class="p-column-title">Year</span>
{{slotProps.data.year}}
</template>
</Column>
<Column field="brand" header="Brand">
<template #body="slotProps">
<span class="p-column-title">Brand</span>
{{slotProps.data.brand}}
</template>
</Column>
<Column field="color" header="Color">
<template #body="slotProps">
<span class="p-column-title">Color</span>
{{slotProps.data.color}}
</template>
</Column>
</DataTable>
<Column field="vin" header="Vin">
<template #body="slotProps">
<span class="p-column-title">Vin</span>
{{slotProps.data.vin}}
</template>
</Column>
<Column field="year" header="Year">
<template #body="slotProps">
<span class="p-column-title">Year</span>
{{slotProps.data.year}}
</template>
</Column>
<Column field="brand" header="Brand">
<template #body="slotProps">
<span class="p-column-title">Brand</span>
{{slotProps.data.brand}}
</template>
</Column>
<Column field="color" header="Color">
<template #body="slotProps">
<span class="p-column-title">Color</span>
{{slotProps.data.color}}
</template>
</Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,34 +8,36 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
<template #header>
<div class="table-header-container">
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
</template>
<Column :expander="true" headerStyle="width: 3em" />
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #expansion="slotProps">
<div class="car-details">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="p-grid">
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
</div>
<div class="card">
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
<template #header>
<div class="table-header-container">
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<Button icon="pi pi-search"></Button>
</div>
</template>
</DataTable>
</template>
<Column :expander="true" headerStyle="width: 3em" />
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #expansion="slotProps">
<div class="car-details">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="p-grid">
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
</div>
</div>
<Button icon="pi pi-search"></Button>
</div>
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,56 +8,62 @@
</div>
<div class="content-section implementation">
<h5>Subheader Grouping</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
<Column field="brand" header="Brand"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="color" header="Color"></Column>
<Column field="price" header="Price"></Column>
<template #groupheader="slotProps">
<span>{{slotProps.data.brand}}</span>
</template>
<template #groupfooter="slotProps">
<td colspan="3" style="text-align: right">Total Price</td>
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
</template>
</DataTable>
<h5>Expandable Row Groups</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
<Column field="brand" header="Brand"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="color" header="Color"></Column>
<Column field="price" header="Price"></Column>
<template #groupheader="slotProps">
<span>{{slotProps.data.brand}}</span>
</template>
<template #groupfooter="slotProps">
<td colspan="3" style="text-align: right">Total Price</td>
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
</template>
</DataTable>
<h5>RowSpan Grouping</h5>
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
<Column header="#" headerStyle="width:3em">
<template #body="slotProps">
{{slotProps.index}}
<div class="card">
<h5>Subheader Grouping</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
<Column field="brand" header="Brand"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="color" header="Color"></Column>
<Column field="price" header="Price"></Column>
<template #groupheader="slotProps">
<span>{{slotProps.data.brand}}</span>
</template>
</Column>
<Column field="brand" header="Brand"></Column>
<Column field="year" header="Year"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="color" header="Color"></Column>
<Column field="price" header="Price"></Column>
</DataTable>
<template #groupfooter="slotProps">
<td colspan="3" style="text-align: right">Total Price</td>
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>Expandable Row Groups</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
<Column field="brand" header="Brand"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="color" header="Color"></Column>
<Column field="price" header="Price"></Column>
<template #groupheader="slotProps">
<span>{{slotProps.data.brand}}</span>
</template>
<template #groupfooter="slotProps">
<td colspan="3" style="text-align: right">Total Price</td>
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>RowSpan Grouping</h5>
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
<Column header="#" headerStyle="width:3em">
<template #body="slotProps">
{{slotProps.index}}
</template>
</Column>
<Column field="brand" header="Brand"></Column>
<Column field="year" header="Year"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="color" header="Color"></Column>
<Column field="price" header="Price"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,19 +8,24 @@
</div>
<div class="content-section implementation">
<h5>Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<h5>Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<h5>Flexible Scroll</h5>
<p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table.
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
<div class="card">
<h5>Flexible Scroll</h5>
<p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table.
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
</div>
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column>
@ -34,68 +39,76 @@
</template>
</Dialog>
<h5>Virtual Scroll</h5>
<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="vin" header="Vin">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="year" header="Year">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="brand" header="Brand">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="color" header="Color">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
</DataTable>
<div class="card">
<h5>Virtual Scroll</h5>
<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="vin" header="Vin">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="year" header="Year">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="brand" header="Brand">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="color" header="Color">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
</DataTable>
</div>
<h5>Horizontal and Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"></Column>
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_1"></Column>
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_2"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_2"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"></Column>
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
</DataTable>
<div class="card">
<h5>Horizontal and Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"></Column>
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_1"></Column>
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_2"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_2"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"></Column>
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
</DataTable>
</div>
<h5>Frozen Rows</h5>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<h5>Frozen Rows</h5>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<h5>Frozen Columns</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
<template #body="slotProps">
<span style="font-weight: bold">{{slotProps.data.vin}}</span>
</template>
</Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_1"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_1"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_1"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_2"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_2"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_2"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_3"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_3"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"></Column>
</DataTable>
<div class="card">
<h5>Frozen Columns</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
<template #body="slotProps">
<span style="font-weight: bold">{{slotProps.data.vin}}</span>
</template>
</Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_1"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_1"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_1"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_2"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_2"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_2"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_3"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_3"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,35 +8,41 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem">
<template #header>
Small Table
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem">
<template #header>
Small Table
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<DataTable :value="cars" style="margin-bottom: 2rem">
<template #header>
Normal Table
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" style="margin-bottom: 2rem">
<template #header>
Normal Table
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<DataTable :value="cars" class="p-datatable-lg">
<template #header>
Large Table
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" class="p-datatable-lg">
<template #header>
Large Table
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,37 +8,45 @@
</div>
<div class="content-section implementation">
<h5>Single Column</h5>
<DataTable :value="cars">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<div class="card">
<h5>Single Column</h5>
<DataTable :value="cars">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
<h5>Multiple Columns</h5>
<DataTable :value="cars" sortMode="multiple">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<div class="card">
<h5>Multiple Columns</h5>
<DataTable :value="cars" sortMode="multiple">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
<h5>Presort</h5>
<DataTable :value="cars" sortField="year" :sortOrder="-1">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<div class="card">
<h5>Presort</h5>
<DataTable :value="cars" sortField="year" :sortOrder="-1">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
<h5>Removable Sort</h5>
<DataTable :value="cars" removableSort>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<div class="card">
<h5>Removable Sort</h5>
<DataTable :value="cars" removableSort>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,89 +8,93 @@
</div>
<div class="content-section implementation">
<h5>Session Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
stateStorage="session" stateKey="dt-state-demo-session">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</div>
</template>
<Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
<div class="card">
<h5>Session Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
stateStorage="session" stateKey="dt-state-demo-session">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</div>
</template>
</Column>
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
<Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
</template>
</Column>
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
</template>
</Column>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true">
<template #filter>
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color" filterMatchMode="in" :sortable="true">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty>
No records found.
</template>
</Column>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true">
<template #filter>
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color" filterMatchMode="in" :sortable="true">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty>
No records found.
</template>
</DataTable>
</DataTable>
</div>
<h5>Local Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
stateStorage="local" stateKey="dt-state-demo-local">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</div>
</template>
<Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
<div class="card">
<h5>Local Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
stateStorage="local" stateKey="dt-state-demo-local">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</div>
</template>
</Column>
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
<Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
</template>
</Column>
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
</template>
</Column>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true">
<template #filter>
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color" filterMatchMode="in" :sortable="true">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty>
No records found.
</template>
</Column>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true">
<template #filter>
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color" filterMatchMode="in" :sortable="true">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty>
No records found.
</template>
</DataTable>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,18 +8,20 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" class="p-datatable-striped">
<template #header>
Header
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #footer>
Footer
</template>
</DataTable>
<div class="card">
<DataTable :value="cars" class="p-datatable-striped">
<template #header>
Header
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #footer>
Footer
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,18 +8,20 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" :rowClass="rowClass">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year" bodyStyle="padding: 0">
<template #body="slotProps">
<div :class="[{'old-car': slotProps.data.year < 2010}]">
{{slotProps.data.year}}
</div>
</template>
</Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<div class="card">
<DataTable :value="cars" :rowClass="rowClass">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year" bodyStyle="padding: 0">
<template #body="slotProps">
<div :class="[{'old-car': slotProps.data.year < 2010}]">
{{slotProps.data.year}}
</div>
</template>
</Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">

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

@ -8,34 +8,36 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars">
<template #header>
<div class="table-header">
List of Cars
<Button icon="pi pi-refresh" />
</div>
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand">
<template #body="slotProps">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/>
</template>
</Column>
<Column field="color" header="Color"></Column>
<Column headerStyle="width: 8em" bodyStyle="text-align: center">
<div class="card">
<DataTable :value="cars">
<template #header>
<Button type="button" icon="pi pi-cog"></Button>
<div class="table-header">
List of Cars
<Button icon="pi pi-refresh" />
</div>
</template>
<template #body="slotProps">
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand">
<template #body="slotProps">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/>
</template>
</Column>
<Column field="color" header="Color"></Column>
<Column headerStyle="width: 8em" bodyStyle="text-align: center">
<template #header>
<Button type="button" icon="pi pi-cog"></Button>
</template>
<template #body="slotProps">
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
</template>
</Column>
<template #footer>
In total there are {{cars ? cars.length : 0 }} cars.
</template>
</Column>
<template #footer>
In total there are {{cars ? cars.length : 0 }} cars.
</template>
</DataTable>
</DataTable>
</div>
</div>
<div class="content-section documentation">

73
src/views/dataview/DataViewDemo.vue
View File

@ -8,43 +8,46 @@
</div>
<div class="content-section implementation">
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
<template #header>
<div class="p-grid p-nogutter">
<div class="p-col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
</div>
<div class="p-col-6" style="text-align: right">
<DataViewLayoutOptions v-model="layout" />
</div>
</div>
</template>
<template #list="slotProps" >
<div class="p-col-12">
<div class="car-details">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="p-grid">
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
</div>
<div class="card">
<DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20"
:sortOrder="sortOrder" :sortField="sortField">
<template #header>
<div class="p-grid p-nogutter">
<div class="p-col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
</div>
<div class="p-col-6" style="text-align: right">
<DataViewLayoutOptions v-model="layout" />
</div>
<Button icon="pi pi-search"></Button>
</div>
</div>
</template>
<template #grid="slotProps">
<div style="padding: .5em" class="p-col-12 p-md-3">
<Panel :header="slotProps.data.vin" style="text-align: center">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
<Button icon="pi pi-search"></Button>
</Panel>
</div>
</template>
</DataView>
</template>
<template #list="slotProps" >
<div class="p-col-12">
<div class="car-details">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="p-grid">
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
</div>
</div>
<Button icon="pi pi-search"></Button>
</div>
</div>
</template>
<template #grid="slotProps">
<div style="padding: .5em" class="p-col-12 p-md-3">
<Panel :header="slotProps.data.vin" style="text-align: center">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
<Button icon="pi pi-search"></Button>
</Panel>
</div>
</template>
</DataView>
</div>
</div>
<DataViewDoc />

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

@ -411,7 +411,7 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt;

38
src/views/deferredcontent/DeferredContentDemo.vue
View File

@ -8,25 +8,27 @@
</div>
<div class="content-section implementation">
<div style="height: 800px">
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
<div class="card">
<div style="height: 800px">
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
</div>
<DeferredContent @load="onImageLoad">
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
</DeferredContent>
<div style="height: 500px">
</div>
<DeferredContent @load="onDataLoad">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</DeferredContent>
</div>
<DeferredContent @load="onImageLoad">
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
</DeferredContent>
<div style="height: 500px">
</div>
<DeferredContent @load="onDataLoad">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</DeferredContent>
</div>
<DeferredContentDoc />

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

@ -8,93 +8,95 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
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,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeBasic" />
<Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/>
</template>
</Dialog>
<div class="card">
<h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
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,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeBasic" />
<Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/>
</template>
</Dialog>
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
<Dialog header="Godfather Casting" :visible.sync="displayBasic2" :style="{width: '50vw'}">
Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
<br><br>
After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
<br><br>
From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
<br><br>
Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
<br><br>
Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
<br><br>
Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
<br><br>
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeBasic2" />
<Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/>
</template>
</Dialog>
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
<Dialog header="Godfather Casting" :visible.sync="displayBasic2" :style="{width: '50vw'}">
Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
<br><br>
After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
<br><br>
From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
<br><br>
Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
<br><br>
Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
<br><br>
Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
<br><br>
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeBasic2" />
<Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/>
</template>
</Dialog>
<h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Godfather I" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
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,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeModal" />
<Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
</template>
</Dialog>
<h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Godfather I" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
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,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeModal" />
<Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
</template>
</Dialog>
<h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Godfather I" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
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,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeMaximizable" />
<Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/>
</template>
</Dialog>
<h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Godfather I" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
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,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeMaximizable" />
<Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/>
</template>
</Dialog>
<h5>Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
<h5>Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
</div>
</div>
<Dialog header="Godfather I" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
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.
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.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closePosition" />
<Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary"/>
</template>
</Dialog>
</div>
<Dialog header="Godfather I" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
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.
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.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closePosition" />
<Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary"/>
</template>
</Dialog>
</div>
<DialogDoc/>

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

@ -8,30 +8,32 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
<div class="card">
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
<template #value="slotProps">
<div class="p-dropdown-car-value" v-if="slotProps.value">
<img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
<span>{{slotProps.value.brand}}</span>
</div>
<span v-else>
{{slotProps.placeholder}}
</span>
</template>
<template #option="slotProps">
<div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
<template #value="slotProps">
<div class="p-dropdown-car-value" v-if="slotProps.value">
<img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
<span>{{slotProps.value.brand}}</span>
</div>
<span v-else>
{{slotProps.placeholder}}
</span>
</template>
<template #option="slotProps">
<div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</div>
</div>
<DropdownDoc/>

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

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

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

@ -8,21 +8,23 @@
</div>
<div class="content-section implementation">
<h5>Regular</h5>
<Fieldset legend="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
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.</p>
</Fieldset>
<div class="card">
<h5>Regular</h5>
<Fieldset legend="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
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.</p>
</Fieldset>
<h5>Toggleable</h5>
<Fieldset legend="Godfather I" :toggleable="true">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
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.</p>
</Fieldset>
<h5>Toggleable</h5>
<Fieldset legend="Godfather I" :toggleable="true">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
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.</p>
</Fieldset>
</div>
</div>
<FieldsetDoc/>

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

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

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

@ -9,149 +9,167 @@
</div>
<div class="content-section implementation">
<h5>Vertical</h5>
<div class="p-fluid">
<div class="p-field">
<label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" />
</div>
<div class="p-field">
<label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" />
<div class="card">
<h5>Vertical</h5>
<div class="p-fluid">
<div class="p-field">
<label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" />
</div>
<div class="p-field">
<label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" />
</div>
</div>
</div>
<h5>Vertical and Grid</h5>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" />
</div>
<div class="p-field p-col">
<label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" />
<div class="card">
<h5>Vertical and Grid</h5>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" />
</div>
<div class="p-field p-col">
<label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" />
</div>
</div>
</div>
<h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col">
<InputText id="firstname3" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col">
<InputText id="lastname3" type="text" />
</div>
</div>
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<div class="p-field p-grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
<div class="p-col-12 p-md-10">
<InputText id="firstname4" type="text" />
<div class="card">
<h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col">
<InputText id="firstname3" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col-12 p-md-10">
<InputText id="lastname4" type="text" />
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col">
<InputText id="lastname3" type="text" />
</div>
</div>
</div>
<h5>Inline</h5>
<div class="p-formgroup-inline">
<div class="p-field">
<label for="firstname5" class="p-sr-only">Firstname</label>
<InputText id="firstname5" type="text" placeholder="Firstname" />
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<div class="p-field p-grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
<div class="p-col-12 p-md-10">
<InputText id="firstname4" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col-12 p-md-10">
<InputText id="lastname4" type="text" />
</div>
</div>
</div>
<div class="p-field">
<label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" />
</div>
<Button type="button" label="Submit" />
</div>
<h5>Vertical Checkbox</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
<label for="city2">Los Angeles</label>
<div class="card">
<h5>Inline</h5>
<div class="p-formgroup-inline">
<div class="p-field">
<label for="firstname5" class="p-sr-only">Firstname</label>
<InputText id="firstname5" type="text" placeholder="Firstname" />
</div>
<div class="p-field">
<label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" />
</div>
<Button type="button" label="Submit" />
</div>
</div>
<h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline">
<div class="card">
<h5>Vertical Checkbox</h5>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label>
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label>
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
<label for="city2">Los Angeles</label>
</div>
<h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label>
</div>
</div>
</div>
<h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
<label for="city6">Los Angeles</label>
</div>
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
<div class="card">
<h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label>
</div>
<div class="p-field-checkbox">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
<div class="p-field-radiobutton">
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
<label for="city6">Los Angeles</label>
</div>
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="p-field-checkbox">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>
</div>
</div>
<h5>Help Text</h5>
<div class="p-field p-fluid">
<label for="username">Username</label>
<InputText id="username" type="username" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
<div class="card">
<h5>Help Text</h5>
<div class="p-field p-fluid">
<label for="username">Username</label>
<InputText id="username" type="username" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
</div>
<h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-6">
<label for="firstname6">Firstname</label>
<InputText id="firstname6" type="text" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="lastname6">Lastname</label>
<InputText id="lastname6" type="text" />
</div>
<div class="p-field p-col-12">
<label for="address">Address</label>
<Textarea id="address" type="text" rows="4" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="city">City</label>
<InputText id="city" type="text" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="state">State</label>
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="zip">Zip</label>
<InputText id="zip" type="text" />
<div class="card">
<h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-6">
<label for="firstname6">Firstname</label>
<InputText id="firstname6" type="text" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="lastname6">Lastname</label>
<InputText id="lastname6" type="text" />
</div>
<div class="p-field p-col-12">
<label for="address">Address</label>
<Textarea id="address" type="text" rows="4" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="city">City</label>
<InputText id="city" type="text" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="state">State</label>
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="zip">Zip</label>
<InputText id="zip" type="text" />
</div>
</div>
</div>
</div>

4
src/views/fullcalendar/FullCalendarDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<FullCalendar :events="events" :options="options" />
<div class="card">
<FullCalendar :events="events" :options="options" />
</div>
</div>
<FullCalendarDoc/>

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

@ -8,29 +8,31 @@
</div>
<div class="content-section implementation">
<Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
</template>
<template #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images" class="title-container">
<span>{{activeIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeIndex].title}}</span>
<span>{{images[activeIndex].alt}}</span>
</span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" />
</div>
</template>
</Galleria>
<div class="card">
<Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
</template>
<template #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images" class="title-container">
<span>{{activeIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeIndex].title}}</span>
<span>{{images[activeIndex].alt}}</span>
</span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" />
</div>
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,15 +8,17 @@
</div>
<div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,20 +8,22 @@
</div>
<div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="{item}">
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="{item}">
<div class="p-grid p-nogutter p-justify-center">
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
</div>
</template>
<template #caption="{item}">
<h4 style="margin-bottom: .5rem;">{{item.title}}</h4>
<p>{{item.alt}}</p>
</template>
</Galleria>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="{item}">
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="{item}">
<div class="p-grid p-nogutter p-justify-center">
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
</div>
</template>
<template #caption="{item}">
<h4 style="margin-bottom: .5rem;">{{item.title}}</h4>
<p>{{item.alt}}</p>
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,14 +8,16 @@
</div>
<div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
</div>
<GalleriaDoc />

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

@ -8,46 +8,52 @@
</div>
<div class="content-section implementation">
<h5>With Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<h5>With Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
<h5>Without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
</div>
<h5>Custom Content</h5>
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Custom Content</h5>
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div v-if="images" class="p-grid" style="max-width: 400px;">
<div v-for="(image, index) of images" class="p-col-3" :key="index">
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
<div v-if="images" class="p-grid" style="max-width: 400px;">
<div v-for="(image, index) of images" class="p-col-3" :key="index">
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
</div>
</div>
</div>
</div>

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

@ -8,66 +8,80 @@
</div>
<div class="content-section implementation">
<h5>Indicators with Click Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Indicators with Click Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<h5>Indicators with Hover Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Indicators with Hover Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<h5>Inside Content</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Inside Content</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<h5>Indicator Template</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #indicator="{index}">
<span class="indicator-text">
{{index + 1}}
</span>
</template>
</Galleria>
<div class="card">
<h5>Indicator Template</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #indicator="{index}">
<span class="indicator-text">
{{index + 1}}
</span>
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,49 +8,57 @@
</div>
<div class="content-section implementation">
<h5>Item Navigators and Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Item Navigators and Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
<h5>Item Navigators without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Item Navigators without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
<h5>Item Navigators on Hover</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Item Navigators on Hover</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
<h5>Item Navigators and Indicators</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<h5>Item Navigators and Indicators</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,19 +8,21 @@
</div>
<div class="content-section implementation">
<div style="padding: .5rem 0">
<Button icon="pi pi-minus" @click="prev" class="p-button-secondary" />
<Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" />
</div>
<div class="card">
<div style="padding: .5rem 0">
<Button icon="pi pi-minus" @click="prev" class="p-button-secondary" />
<Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" />
</div>
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,14 +8,16 @@
</div>
<div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,49 +8,57 @@
</div>
<div class="content-section implementation">
<h5>Positioned at Bottom</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<div class="card">
<h5>Positioned at Bottom</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template>
</Galleria>
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
</template>
</Galleria>
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
</template>
</Galleria>
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template>
</Galleria>
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">

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

@ -8,41 +8,43 @@
</div>
<div class="content-section implementation">
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
</template>
<template #content>
<InputText v-model="text" autoFocus />
</template>
</Inplace>
<div class="card">
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
</template>
<template #content>
<InputText v-model="text" autoFocus />
</template>
</Inplace>
<h5>Image</h5>
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img src="demo/images/nature/nature1.jpg" />
</template>
</Inplace>
<h5>Image</h5>
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img src="demo/images/nature/nature1.jpg" />
</template>
</Inplace>
<h5>Lazy Data</h5>
<Inplace @open="loadData">
<template #display>
View Data
</template>
<template #content>
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</template>
</Inplace>
<h5>Lazy Data</h5>
<Inplace @open="loadData">
<template #display>
View Data
</template>
<template #content>
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</template>
</Inplace>
</div>
</div>
<InplaceDoc />

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

@ -8,104 +8,107 @@
</div>
<div class="content-section implementation">
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<InputText placeholder="Username" />
<div class="card">
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<InputText placeholder="Username" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" />
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">.00</span>
<h5>Multiple Addons</h5>
<div class="p-grid">
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-clock"></i>
</span>
<span class="p-inputgroup-addon">
<i class="pi pi-star"></i>
</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" />
<h5>Button Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button label="Search"/>
<InputText placeholder="Keyword"/>
</div>
</div>
</div>
</div>
<h5>Multiple Addons</h5>
<div class="p-grid">
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-clock"></i>
</span>
<span class="p-inputgroup-addon">
<i class="pi pi-star"></i>
</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/>
</div>
</div>
</div>
</div>
<h5>Button Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button label="Search"/>
<InputText placeholder="Keyword"/>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/>
<Button icon="pi pi-times" class="p-button-danger"/>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/>
<h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" />
</span>
<InputText placeholder="Username"/>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/>
<Button icon="pi pi-times" class="p-button-danger"/>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<InputText placeholder="Price"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
</span>
</div>
</div>
</div>
</div>
<h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" />
</span>
<InputText placeholder="Username"/>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<InputText placeholder="Price"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
</span>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" />
</span>
<InputText placeholder="Website"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
</span>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" />
</span>
<InputText placeholder="Website"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
</span>
</div>
</div>
</div>
</div>

50
src/views/inputmask/InputMaskDemo.vue
View File

@ -8,35 +8,37 @@
</div>
<div class="content-section implementation">
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
<div class="card">
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
<div class="p-field p-col-12 p-md-4">
<label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div>
</div>
</div>
</div>

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

@ -8,102 +8,105 @@
</div>
<div class="content-section implementation">
<h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-3">
<label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
<div class="card">
<h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-3">
<label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-japan">Indian Locale</label>
<InputNumber id="locale-japan" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
<h5>Currency</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="locale-japan">Indian Locale</label>
<InputNumber id="locale-japan" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div>
</div>
<h5>Currency</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
<h5>Prefix and Suffix</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div>
</div>
<h5>Prefix and Suffix</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div>
</div>
<h5>Buttons</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="vertical">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
<h5>Buttons</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="vertical">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div>
</div>
</div>
</div>

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

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

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

@ -8,18 +8,20 @@
</div>
<div class="content-section implementation">
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
<div class="card">
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
<template #option="slotProps">
<div class="car-item">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Listbox>
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
<template #option="slotProps">
<div class="car-item">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Listbox>
</div>
</div>
<ListboxDoc/>

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

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

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

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

12
src/views/menubar/MenubarDemo.vue
View File

@ -8,11 +8,13 @@
</div>
<div class="content-section implementation">
<Menubar :model="items">
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
<div class="card">
<Menubar :model="items">
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
</div>
</div>
<MenubarDoc />

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

@ -1,14 +1,10 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>MenuModel</h1>
<p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>
</div>
</div>
<div class="content-section documentation">
<h5">MenuItem</h5>
<h1>MenuModel</h1>
<p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>
<h5>MenuItem</h5>
<p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
<CodeHighlight lang="js">
const items: [

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

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

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

@ -8,27 +8,29 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
<div class="card">
<h5>Basic</h5>
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
<h5>Advanced with Templating and Filtering</h5>
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" class="multiselect-custom">
<template #value="slotProps">
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
</div>
<template v-if="!slotProps.value || slotProps.value.length === 0">
Select Brands
<h5>Advanced with Templating and Filtering</h5>
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" class="multiselect-custom">
<template #value="slotProps">
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
</div>
<template v-if="!slotProps.value || slotProps.value.length === 0">
Select Brands
</template>
</template>
</template>
<template #option="slotProps">
<div class="p-multiselect-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</MultiSelect>
<template #option="slotProps">
<div class="p-multiselect-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</MultiSelect>
</div>
</div>
<MultiSelectDoc/>

28
src/views/orderlist/OrderListDemo.vue
View File

@ -8,20 +8,22 @@
</div>
<div class="content-section implementation">
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
<template #header>
List of Cars
</template>
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
<div class="card">
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
<template #header>
List of Cars
</template>
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
</div>
</div>
</div>
</template>
</OrderList>
</template>
</OrderList>
</div>
</div>
<OrderListDoc />

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

@ -8,27 +8,31 @@
</div>
<div class="content-section implementation">
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
<div class="card">
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
<div class="card">
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
</div>
<OrganizationChartDoc />

10
src/views/overlaypanel/OverlayPanelDemo.vue
View File

@ -8,11 +8,13 @@
</div>
<div class="content-section implementation">
<Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<div class="card">
<Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel>
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel>
</div>
</div>
<OverlayPanelDoc/>

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

@ -8,22 +8,24 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
<div class="card">
<h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
<h5>Custom</h5>
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
<template #left>
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
</template>
<template #right>
<Button type="button" icon="pi pi-search" />
</template>
</Paginator>
<h5>Custom</h5>
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
<template #left>
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
</template>
<template #right>
<Button type="button" icon="pi pi-search" />
</template>
</Paginator>
<div class="image-gallery">
<img :src="'demo/images/nature/' + image + '.jpg'" />
<div class="image-gallery">
<img :src="'demo/images/nature/' + image + '.jpg'" />
</div>
</div>
</div>

4
src/views/panelmenu/PanelMenuDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<PanelMenu :model="items" />
<div class="card">
<PanelMenu :model="items" />
</div>
</div>
<PanelMenuDoc />

4
src/views/password/PasswordDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<Password v-model="value" />
<div class="card">
<Password v-model="value" />
</div>
</div>
<PasswordDoc/>

34
src/views/picklist/PickListDemo.vue
View File

@ -8,23 +8,25 @@
</div>
<div class="content-section implementation">
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
<template #sourceHeader>
Available
</template>
<template #targetHeader>
Selected
</template>
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
<div class="card">
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
<template #sourceHeader>
Available
</template>
<template #targetHeader>
Selected
</template>
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
</div>
</div>
</div>
</template>
</PickList>
</template>
</PickList>
</div>
</div>
<PickListDoc />

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

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

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

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

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

@ -8,31 +8,33 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city3" name="city" value="New York" v-model="city" />
<label for="city3">New York</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4">San Francisco</label>
</div>
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
<div class="card">
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city3" name="city" value="New York" v-model="city" />
<label for="city3">New York</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4">San Francisco</label>
</div>
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
<label :for="theme.key">{{theme.name}}</label>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
<label :for="theme.key">{{theme.name}}</label>
</div>
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
</div>
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
</div>
<RadioButtonDoc/>

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

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

104
src/views/scrollpanel/ScrollPanelDemo.vue
View File

@ -8,57 +8,59 @@
</div>
<div class="content-section implementation">
<div class="p-grid">
<div class="p-col-12 p-md-4">
<ScrollPanel style="width: 100%; height: 200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
<div class="p-col-12 p-md-4">
<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
<div class="p-col-12 p-md-4">
<ScrollPanel style="width: 100%; height: 200px" class="custombar2">
<p style="width: 600px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
<div class="card">
<div class="p-grid">
<div class="p-col-12 p-md-4">
<ScrollPanel style="width: 100%; height: 200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
<div class="p-col-12 p-md-4">
<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
<div class="p-col-12 p-md-4">
<ScrollPanel style="width: 100%; height: 200px" class="custombar2">
<p style="width: 600px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
</div>
</div>
</div>

34
src/views/selectbutton/SelectButtonDemo.vue
View File

@ -8,24 +8,26 @@
</div>
<div class="content-section implementation">
<h5>Single</h5>
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
<div class="card">
<h5>Single</h5>
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
<h5>Multiple</h5>
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
<h5>Multiple</h5>
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
<h5>Custom Content</h5>
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
<template #option="slotProps">
<div class="car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<div>{{slotProps.option.brand}}</div>
</div>
</template>
</SelectButton>
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
<h5>Custom Content</h5>
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
<template #option="slotProps">
<div class="car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<div>{{slotProps.option.brand}}</div>
</div>
</template>
</SelectButton>
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
</div>
</div>
<SelectButtonDoc/>

14
src/views/sidebar/SidebarDemo.vue
View File

@ -8,6 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
</div>
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
<h1 style="fontWeight:normal">Left Sidebar</h1>
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
@ -37,12 +45,6 @@
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
</Sidebar>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
</div>
<SidebarDoc/>

24
src/views/slider/SliderDemo.vue
View File

@ -8,21 +8,23 @@
</div>
<div class="content-section implementation">
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />
<div class="card">
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />
<h5>Input: {{value2}}</h5>
<InputText v-model.number="value2" />
<Slider v-model="value2" />
<h5>Input: {{value2}}</h5>
<InputText v-model.number="value2" />
<Slider v-model="value2" />
<h5>Step: {{value3}}</h5>
<Slider v-model="value3" :step="20" />
<h5>Step: {{value3}}</h5>
<Slider v-model="value3" :step="20" />
<h5>Range: {{value4}}</h5>
<Slider v-model="value4" :range="true" />
<h5>Range: {{value4}}</h5>
<Slider v-model="value4" :range="true" />
<h5>Vertical: {{value5}}</h5>
<Slider v-model="value5" orientation="vertical" />
<h5>Vertical: {{value5}}</h5>
<Slider v-model="value5" orientation="vertical" />
</div>
</div>
<SliderDoc/>

20
src/views/splitbutton/SplitButtonDemo.vue
View File

@ -8,16 +8,18 @@
</div>
<div class="content-section implementation">
<h5>Basic</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
<div class="card">
<h5>Basic</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
<h5>Severities</h5>
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
<h5>Severities</h5>
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
</div>
</div>
<SplitButtonDoc/>

4
src/views/steps/StepsDemo.vue
View File

@ -68,4 +68,8 @@ export default {
/deep/ b {
display: block
}
/deep/ .p-card-body {
padding: 2rem;
}
</style>

2
src/views/support/Support.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section documentation">
<h5">Community Support</h5>
<h5>Community Support</h5>
<p><a href="https://forum.primefaces.org/viewforum.php?f=110">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeVue PRO support.</p>

3
src/views/tabmenu/CalendarDemo.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-calendar" />
<h1>Calendar Component Content</h1>
<h5>Calendar Component Content</h5>
</div>
</template>

3
src/views/tabmenu/DocumentationDemo.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-file" />
<h1>Documentation Component Content</h1>
<h5>Documentation Component Content</h5>
</div>
</template>

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