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

View File

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

View File

@ -8,102 +8,110 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h5>Default</h5> <div class="card">
<Accordion> <h5>Default</h5>
<AccordionTab header="Godfather I"> <Accordion>
<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, <AccordionTab header="Godfather I">
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 <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,
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> 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
</AccordionTab> 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 header="Godfather II"> </AccordionTab>
<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, <AccordionTab header="Godfather II">
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 <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,
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p> 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
</AccordionTab> his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
<AccordionTab header="Godfather III"> </AccordionTab>
<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 <AccordionTab header="Godfather III">
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. <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
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p> 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.
</AccordionTab> A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</Accordion> </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> </div>
<Accordion :multiple="true"> <div class="card">
<AccordionTab header="Godfather I" :active="active1"> <h5>Multiple</h5>
<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, <Accordion :multiple="true">
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 <AccordionTab header="Godfather I">
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> <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,
</AccordionTab> 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
<AccordionTab header="Godfather II" :active="active2"> 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>
<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, </AccordionTab>
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 <AccordionTab header="Godfather II">
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p> <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,
</AccordionTab> 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
<AccordionTab header="Godfather III" :active="active3"> his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
<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 </AccordionTab>
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. <AccordionTab header="Godfather III">
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p> <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
</AccordionTab> 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.
</Accordion> 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> <div class="card">
<Accordion class="accordion-custom"> <h5>Programmatic</h5>
<AccordionTab> <div style="padding: .5em 0 1em 0">
<template slot="header"> <Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
<i class="pi pi-calendar"></i> <Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
<span>Godfather I</span> <Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
</template> </div>
<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 <Accordion :multiple="true">
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 header="Godfather I" :active="active1">
</AccordionTab> <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,
<AccordionTab> 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
<template slot="header"> 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>
<i class="pi pi-user"></i> </AccordionTab>
<span>Godfather II</span> <AccordionTab header="Godfather II" :active="active2">
</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,
<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
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>
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p> </AccordionTab>
</AccordionTab> <AccordionTab header="Godfather III" :active="active3">
<AccordionTab> <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
<template slot="header"> 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.
<i class="pi pi-search"></i> A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
<span>Godfather III</span> </AccordionTab>
<i class="pi pi-cog"></i> </Accordion>
</template> </div>
<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. <div class="card">
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p> <h5>Custom Headers</h5>
</AccordionTab> <Accordion class="accordion-custom">
</Accordion> <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> </div>
<AccordionDoc/> <AccordionDoc/>

View File

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

View File

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

View File

@ -8,23 +8,25 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h5>Document</h5> <div class="card">
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI> <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> <h5>Panel</h5>
<Button type="button" label="Block" @click="blockPanel()"></Button> <Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button> <Button type="button" label="Unblock" @click="unblockPanel()"></Button>
<BlockUI :blocked="blockedPanel"> <BlockUI :blocked="blockedPanel">
<Panel header="Godfather I" style="margin-top: 20px"> <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. <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. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p> kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Panel> </Panel>
</BlockUI> </BlockUI>
</div>
</div> </div>
<BlockUIDoc /> <BlockUIDoc />

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,12 +1,5 @@
<template> <template>
<div> <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/> <ChartDoc/>
</div> </div>
</template> </template>

View File

@ -1,5 +1,8 @@
<template> <template>
<div class="content-section documentation"> <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> <h5>Getting Started</h5>
<p>To begin with, charts.js package needs to be installed in your project.</p> <p>To begin with, charts.js package needs to be installed in your project.</p>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,44 +8,46 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<DataTable :value="cars" :filters="filters" :paginator="true" :rows="10"> <div class="card">
<template #header> <DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
<div style="text-align: right"> <template #header>
<i class="pi pi-search" style="margin: 4px 4px 0 0"></i> <div style="text-align: right">
<InputText v-model="filters['global']" placeholder="Global Search" size="50" /> <i class="pi pi-search" style="margin: 4px 4px 0 0"></i>
</div> <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</template> </div>
<Column field="vin" header="Vin" filterMatchMode="startsWith">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
</template> </template>
</Column> <Column field="vin" header="Vin" filterMatchMode="startsWith">
<Column field="year" header="Year" filterMatchMode="contains"> <template #filter>
<template #filter> <InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /> </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> </template>
</Column> </DataTable>
<Column field="brand" header="Brand" filterMatchMode="equals"> </div>
<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>
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,34 +8,36 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin" <div class="card">
@row-expand="onRowExpand" @row-collapse="onRowCollapse"> <DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
<template #header> @row-expand="onRowExpand" @row-collapse="onRowCollapse">
<div class="table-header-container"> <template #header>
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" /> <div class="table-header-container">
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button icon="pi pi-plus" label="Expand All" @click="expandAll" />
</div> <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</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> </div>
<Button icon="pi pi-search"></Button> </template>
</div> <Column :expander="true" headerStyle="width: 3em" />
</template> <Column field="vin" header="Vin"></Column>
</DataTable> <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>
<div class="content-section documentation"> <div class="content-section documentation">

View File

@ -8,56 +8,62 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h5>Subheader Grouping</h5> <div class="card">
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" <h5>Subheader Grouping</h5>
sortMode="single" sortField="brand" :sortOrder="1"> <DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
<Column field="brand" header="Brand"></Column> sortMode="single" sortField="brand" :sortOrder="1">
<Column field="vin" header="Vin"></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="year" header="Year"></Column>
<Column field="price" header="Price"></Column> <Column field="color" header="Color"></Column>
<template #groupheader="slotProps"> <Column field="price" header="Price"></Column>
<span>{{slotProps.data.brand}}</span> <template #groupheader="slotProps">
</template> <span>{{slotProps.data.brand}}</span>
<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}}
</template> </template>
</Column> <template #groupfooter="slotProps">
<Column field="brand" header="Brand"></Column> <td colspan="3" style="text-align: right">Total Price</td>
<Column field="year" header="Year"></Column> <td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
<Column field="vin" header="Vin"></Column> </template>
<Column field="color" header="Color"></Column> </DataTable>
<Column field="price" header="Price"></Column> </div>
</DataTable>
<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>
<div class="content-section documentation"> <div class="content-section documentation">

View File

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

View File

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

View File

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

View File

@ -8,89 +8,93 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h5>Session Storage</h5> <div class="card">
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" <h5>Session Storage</h5>
:selection.sync="selectedCar1" selectionMode="single" dataKey="vin" <DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
stateStorage="session" stateKey="dt-state-demo-session"> :selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
<template #header> stateStorage="session" stateKey="dt-state-demo-session">
<div style="text-align: right"> <template #header>
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i> <div style="text-align: right">
<InputText v-model="filters['global']" placeholder="Global Search" size="50" /> <i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
</div> <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</template> </div>
<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> </template>
</Column> <Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true"> <template #filter>
<template #filter> <InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /> </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> </template>
</Column> </DataTable>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"> </div>
<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>
<h5>Local Storage</h5> <div class="card">
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" <h5>Local Storage</h5>
:selection.sync="selectedCar2" selectionMode="single" dataKey="vin" <DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
stateStorage="local" stateKey="dt-state-demo-local"> :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
<template #header> stateStorage="local" stateKey="dt-state-demo-local">
<div style="text-align: right"> <template #header>
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i> <div style="text-align: right">
<InputText v-model="filters['global']" placeholder="Global Search" size="50" /> <i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
</div> <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</template> </div>
<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> </template>
</Column> <Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true"> <template #filter>
<template #filter> <InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /> </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> </template>
</Column> </DataTable>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"> </div>
<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>
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">

View File

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

View File

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

View File

@ -8,34 +8,36 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<DataTable :value="cars"> <div class="card">
<template #header> <DataTable :value="cars">
<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">
<template #header> <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>
<template #body="slotProps"> <Column field="vin" header="Vin"></Column>
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button> <Column field="year" header="Year"></Column>
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button> <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> </template>
</Column> </DataTable>
<template #footer> </div>
In total there are {{cars ? cars.length : 0 }} cars.
</template>
</DataTable>
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">

View File

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

View File

@ -411,7 +411,7 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <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;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt; &lt;div class="p-col-6" style="text-align: left"&gt;

View File

@ -8,25 +8,27 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div style="height: 800px"> <div class="card">
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 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> </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> </div>
<DeferredContentDoc /> <DeferredContentDoc />

View File

@ -8,93 +8,95 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h5>Basic</h5> <div class="card">
<Button label="Show" icon="pi pi-external-link" @click="openBasic" /> <h5>Basic</h5>
<Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}"> <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. <Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}">
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
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, His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
<template #footer> kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<Button label="Yes" icon="pi pi-check" @click="closeBasic" /> <template #footer>
<Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/> <Button label="Yes" icon="pi pi-check" @click="closeBasic" />
</template> <Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/>
</Dialog> </template>
</Dialog>
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" /> <Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
<Dialog header="Godfather Casting" :visible.sync="displayBasic2" :style="{width: '50vw'}"> <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. 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> <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. 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> <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. 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> <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. 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> <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. 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> <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. 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> <br><br>
<template #footer> <template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeBasic2" /> <Button label="Yes" icon="pi pi-check" @click="closeBasic2" />
<Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/> <Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/>
</template> </template>
</Dialog> </Dialog>
<h5>Modal</h5> <h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" /> <Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Godfather I" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true"> <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. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer> <template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeModal" /> <Button label="Yes" icon="pi pi-check" @click="closeModal" />
<Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/> <Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
</template> </template>
</Dialog> </Dialog>
<h5>Maximizable</h5> <h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /> <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Godfather I" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"> <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. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer> <template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeMaximizable" /> <Button label="Yes" icon="pi pi-check" @click="closeMaximizable" />
<Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/> <Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/>
</template> </template>
</Dialog> </Dialog>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="p-grid p-dir-col">
<div class="p-col"> <div class="p-col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" /> <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" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="p-col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" /> <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="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" /> <Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="p-col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" /> <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="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" /> <Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
</div>
</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> </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> </div>
<DialogDoc/> <DialogDoc/>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,49 +8,57 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h5>Positioned at Bottom</h5> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"> <h5>Positioned at Bottom</h5>
<template #item="slotProps"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
<template #thumbnail="slotProps"> </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;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
</div>
<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>
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,14 +1,10 @@
<template> <template>
<div> <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"> <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> <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"> <CodeHighlight lang="js">
const items: [ const items: [

View File

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

View File

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

View File

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

View File

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

View File

@ -8,11 +8,13 @@
</div> </div>
<div class="content-section implementation"> <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"> <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
<img src="demo/images/nature/nature1.jpg" alt="Nature Image"> <img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel> </OverlayPanel>
</div>
</div> </div>
<OverlayPanelDoc/> <OverlayPanelDoc/>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,6 +8,14 @@
</div> </div>
<div class="content-section implementation"> <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"> <Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
<h1 style="fontWeight:normal">Left Sidebar</h1> <h1 style="fontWeight:normal">Left Sidebar</h1>
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" /> <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="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/> <Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
</Sidebar> </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> </div>
<SidebarDoc/> <SidebarDoc/>

View File

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

View File

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

View File

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

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section documentation"> <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 <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> 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>

View File

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

View File

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

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