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

Refactor component registration

pull/12/head
cagataycivici 2018-12-31 22:59:02 +03:00
parent 3dac703466
commit 5a24b31b64
27 changed files with 201 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/main.js
View File

@ -36,34 +36,34 @@ import 'primeicons/primeicons.css';
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.component('p-accordion', Accordion); Vue.component('Accordion', Accordion);
Vue.component('p-accordionTab', AccordionTab); Vue.component('AccordionTab', AccordionTab);
Vue.component('p-button', Button); Vue.component('Button', Button);
Vue.component('p-card', Card); Vue.component('Card', Card);
Vue.component('p-checkbox', Checkbox); Vue.component('Checkbox', Checkbox);
Vue.component('p-chips', Chips); Vue.component('Chips', Chips);
Vue.component('p-dropdown', Dropdown); Vue.component('Dropdown', Dropdown);
Vue.component('p-editor', Editor); Vue.component('Editor', Editor);
Vue.component('p-fullCalendar', FullCalendar); Vue.component('FullCalendar', FullCalendar);
Vue.component('p-inputSwitch', InputSwitch); Vue.component('InputSwitch', InputSwitch);
Vue.component('p-inputtext', InputText); Vue.component('InputText', InputText);
Vue.component('p-listbox', Listbox); Vue.component('Listbox', Listbox);
Vue.component('p-fieldset', Fieldset); Vue.component('Fieldset', Fieldset);
Vue.component('p-multiSelect', MultiSelect); Vue.component('MultiSelect', MultiSelect);
Vue.component('p-panel', Panel); Vue.component('Panel', Panel);
Vue.component('p-password', Password); Vue.component('Password', Password);
Vue.component('p-progressBar', ProgressBar); Vue.component('ProgressBar', ProgressBar);
Vue.component('p-radioButton', RadioButton); Vue.component('RadioButton', RadioButton);
Vue.component('p-rating', Rating); Vue.component('Rating', Rating);
Vue.component('p-selectButton', SelectButton); Vue.component('SelectButton', SelectButton);
Vue.component('p-slider', Slider); Vue.component('Slider', Slider);
Vue.component('p-spinner', Spinner); Vue.component('Spinner', Spinner);
Vue.component('p-tabView', TabView); Vue.component('TabView', TabView);
Vue.component('p-tabPanel', TabPanel); Vue.component('TabPanel', TabPanel);
Vue.component('p-textarea', Textarea); Vue.component('Textarea', Textarea);
Vue.component('p-toolbar', Toolbar); Vue.component('Toolbar', Toolbar);
Vue.component('p-toggleButton', ToggleButton); Vue.component('ToggleButton', ToggleButton);
Vue.component('p-triStateCheckbox', TriStateCheckbox); Vue.component('TriStateCheckbox', TriStateCheckbox);
new Vue({ new Vue({
router, router,

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

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

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

@ -9,35 +9,35 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-button label="Click" /> <Button label="Click" />
<p-button label="Click" icon="pi pi-check" /> <Button label="Click" icon="pi pi-check" />
<p-button label="Click" icon="pi pi-check" iconPos="right" /> <Button label="Click" icon="pi pi-check" iconPos="right" />
<p-button icon="pi pi-check" /> <Button icon="pi pi-check" />
<p-button label="Click" disabled="disabled" /> <Button label="Click" disabled="disabled" />
<h3>Severities</h3> <h3>Severities</h3>
<p-button label="Primary" /> <Button label="Primary" />
<p-button label="Secondary" class="p-button-secondary" /> <Button label="Secondary" class="p-button-secondary" />
<p-button label="Success" class="p-button-success" /> <Button label="Success" class="p-button-success" />
<p-button label="Info" class="p-button-info" /> <Button label="Info" class="p-button-info" />
<p-button label="Warning" class="p-button-warning" /> <Button label="Warning" class="p-button-warning" />
<p-button label="Danger" class="p-button-danger" /> <Button label="Danger" class="p-button-danger" />
<h3>Raised Buttons</h3> <h3>Raised Buttons</h3>
<p-button label="Primary" class="p-button-raised" /> <Button label="Primary" class="p-button-raised" />
<p-button label="Secondary" class="p-button-raised p-button-secondary" /> <Button label="Secondary" class="p-button-raised p-button-secondary" />
<p-button label="Success" class="p-button-raised p-button-success" /> <Button label="Success" class="p-button-raised p-button-success" />
<p-button label="Info" class="p-button-raised p-button-info" /> <Button label="Info" class="p-button-raised p-button-info" />
<p-button label="Warning" class="p-button-raised p-button-warning" /> <Button label="Warning" class="p-button-raised p-button-warning" />
<p-button label="Danger" class="p-button-raised p-button-danger" /> <Button label="Danger" class="p-button-raised p-button-danger" />
<h3>Rounded Buttons</h3> <h3>Rounded Buttons</h3>
<p-button label="Primary" class="p-button-rounded" /> <Button label="Primary" class="p-button-rounded" />
<p-button label="Secondary" class="p-button-rounded p-button-secondary" /> <Button label="Secondary" class="p-button-rounded p-button-secondary" />
<p-button label="Success" class="p-button-rounded p-button-success" /> <Button label="Success" class="p-button-rounded p-button-success" />
<p-button label="Info" class="p-button-rounded p-button-info" /> <Button label="Info" class="p-button-rounded p-button-info" />
<p-button label="Warning" class="p-button-rounded p-button-warning" /> <Button label="Warning" class="p-button-rounded p-button-warning" />
<p-button label="Danger" class="p-button-rounded p-button-danger" /> <Button label="Danger" class="p-button-rounded p-button-danger" />
</div> </div>
</div> </div>
</template> </template>

14
src/views/card/CardDemo.vue
View File

@ -3,12 +3,12 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>Card</h1> <h1>Card</h1>
<p>Card is a flexible container component..</p> <p>Card is a flexible container component.</p>
</div> </div>
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<p-card style="width: 25em; margin-bottom: 2em"> <Card style="width: 25em; margin-bottom: 2em">
<template slot="title"> <template slot="title">
Simple Card Simple Card
</template> </template>
@ -16,9 +16,9 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
</template> </template>
</p-card> </Card>
<p-card style="width: 25em"> <Card style="width: 25em">
<template slot="header"> <template slot="header">
<img alt="user header" src="demo/images/usercard.png"> <img alt="user header" src="demo/images/usercard.png">
</template> </template>
@ -30,10 +30,10 @@
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
</template> </template>
<template slot="footer"> <template slot="footer">
<p-button icon="pi pi-check" label="Save" class="p-button-raised" /> <Button icon="pi pi-check" label="Save" class="p-button-raised" />
<p-button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em"/> <Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" />
</template> </template>
</p-card> </Card>
</div> </div>
</div> </div>
</template> </template>

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

@ -9,25 +9,25 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-checkbox inputId="binary" v-model="checked" /> <Checkbox inputId="binary" v-model="checked" />
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label> <label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
<h3>Multiple</h3> <h3>Multiple</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <div class="p-col-12">
<p-checkbox inputId="city1" name="city" value="Chicago" v-model="cities" /> <Checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1" class="p-checkbox-label">Chicago</label> <label for="city1" class="p-checkbox-label">Chicago</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<p-checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" /> <Checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2" class="p-checkbox-label">Los Angeles</label> <label for="city2" class="p-checkbox-label">Los Angeles</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<p-checkbox inputId="city3" name="city" value="New York" v-model="cities" /> <Checkbox inputId="city3" name="city" value="New York" v-model="cities" />
<label for="city3" class="p-checkbox-label">New York</label> <label for="city3" class="p-checkbox-label">New York</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<p-checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" /> <Checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4" class="p-checkbox-label">San Francisco</label> <label for="city4" class="p-checkbox-label">San Francisco</label>
</div> </div>
</div> </div>
@ -36,7 +36,7 @@
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3> <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid"> <div class="p-grid">
<div v-for="theme of themes" :key="theme.key" class="p-col-12"> <div v-for="theme of themes" :key="theme.key" class="p-col-12">
<p-checkbox :inputId="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/> <Checkbox :inputId="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label> <label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
</div> </div>
</div> </div>

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

@ -9,17 +9,17 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-chips v-model="value1" /> <Chips v-model="value1" />
<h3>Template</h3> <h3>Template</h3>
<p-chips v-model="value2"> <Chips v-model="value2">
<template slot-scope="{value}"> <template slot-scope="{value}">
<div> <div>
<span>{{value}} - (active) </span> <span>{{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>
</p-chips> </Chips>
</div> </div>
</div> </div>
</template> </template>

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

@ -9,20 +9,20 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /> <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
<h3>Editable</h3> <h3>Editable</h3>
<p-dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/> <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h3>Advanced with Templating, Filtering and Clear Icon</h3> <h3>Advanced with Templating, Filtering and Clear Icon</h3>
<p-dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"> <Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
<template slot="option" slot-scope="{option}"> <template slot="option" slot-scope="{option}">
<div class="p-clearfix p-dropdown-car-option"> <div class="p-clearfix p-dropdown-car-option">
<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> </template>
</p-dropdown> </Dropdown>
</div> </div>
</div> </div>
</template> </template>

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

@ -9,10 +9,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Default</h3> <h3 class="first">Default</h3>
<p-editor v-model="value1" editorStyle="height: 320px"/> <Editor v-model="value1" editorStyle="height: 320px"/>
<h3>Customized</h3> <h3>Customized</h3>
<p-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"></button> <button class="ql-bold"></button>
@ -20,7 +20,7 @@
<button class="ql-underline"></button> <button class="ql-underline"></button>
</span> </span>
</template> </template>
</p-editor> </Editor>
</div> </div>
</div> </div>
</template> </template>

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

@ -9,20 +9,20 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Regular</h3> <h3 class="first">Regular</h3>
<p-fieldset legend="Godfather I"> <Fieldset legend="Godfather I">
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.
</p-fieldset> </Fieldset>
<h3>Toggleable</h3> <h3>Toggleable</h3>
<p-fieldset legend="Godfather I" :toggleable="true"> <Fieldset legend="Godfather I" :toggleable="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.
</p-fieldset> </Fieldset>
</div> </div>
</div> </div>
</template> </template>

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

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<p-fullCalendar :events="events" :options="options" /> <FullCalendar :events="events" :options="options" />
</div> </div>
</div> </div>
</template> </template>

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

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

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

@ -9,17 +9,17 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-inputtext type="text" v-model="value1" /> <InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span> <span :style="{marginLeft: '.5em'}">{{value1}}</span>
<h3>Floating Label</h3> <h3>Floating Label</h3>
<span class="p-float-label"> <span class="p-float-label">
<p-inputtext type="text" v-model="value2" /> <InputText type="text" v-model="value2" />
<label htmlFor="float-input">Username</label> <label htmlFor="float-input">Username</label>
</span> </span>
<h3>Disabled</h3> <h3>Disabled</h3>
<p-inputtext type="text" v-model="value3" disabled /> <InputText type="text" v-model="value3" disabled />
</div> </div>
</div> </div>
</template> </template>

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

@ -9,17 +9,17 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Single</h3> <h3 class="first">Single</h3>
<p-listbox v-model="selectedCity" :options="cities" optionLabel="name" /> <Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
<h3>Advanced with Templating, Filtering and Multiple Selection</h3> <h3>Advanced with Templating, Filtering and Multiple Selection</h3>
<p-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 slot-scope="{option}"> <template slot-scope="{option}">
<div className="p-clearfix"> <div className="p-clearfix">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /> <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
<span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span> <span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
</div> </div>
</template> </template>
</p-listbox> </Listbox>
</div> </div>
</div> </div>
</template> </template>

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

@ -9,10 +9,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-multiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" /> <MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
<h3>Advanced with Templating and Filtering</h3> <h3>Advanced with Templating and Filtering</h3>
<p-multiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"> <MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
<template slot="value" slot-scope="{value}"> <template slot="value" slot-scope="{value}">
<div class="p-multiselect-car-token" v-for="option of value" :key="option.brand"> <div class="p-multiselect-car-token" v-for="option of 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'" />
@ -28,7 +28,7 @@
<span>{{option.brand}}</span> <span>{{option.brand}}</span>
</div> </div>
</template> </template>
</p-multiSelect> </MultiSelect>
</div> </div>
</div> </div>
</template> </template>

8
src/views/panel/PanelDemo.vue
View File

@ -9,20 +9,20 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Regular</h3> <h3 class="first">Regular</h3>
<p-panel header="Godfather I"> <Panel header="Godfather I">
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.
</p-panel> </Panel>
<h3>Toggleable</h3> <h3>Toggleable</h3>
<p-panel header="Godfather I" :toggleable="true"> <Panel header="Godfather I" :toggleable="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.
</p-panel> </Panel>
</div> </div>
</div> </div>
</template> </template>

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

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<p-password v-model="value" /> <Password v-model="value" />
</div> </div>
</div> </div>
</template> </template>

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

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

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

@ -11,19 +11,19 @@
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <div class="p-col-12">
<p-radioButton inputId="city1" name="city" value="Chicago" v-model="city" /> <RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
<label for="city1" class="p-radiobutton-label">Chicago</label> <label for="city1" class="p-radiobutton-label">Chicago</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<p-radioButton inputId="city2" name="city" value="Los Angeles" v-model="city" /> <RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2" class="p-radiobutton-label">Los Angeles</label> <label for="city2" class="p-radiobutton-label">Los Angeles</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<p-radioButton inputId="city3" name="city" value="New York" v-model="city" /> <RadioButton inputId="city3" name="city" value="New York" v-model="city" />
<label for="city3" class="p-radiobutton-label">New York</label> <label for="city3" class="p-radiobutton-label">New York</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<p-radioButton inputId="city4" name="city" value="San Francisco" v-model="city" /> <RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4" class="p-radiobutton-label">San Francisco</label> <label for="city4" class="p-radiobutton-label">San Francisco</label>
</div> </div>
</div> </div>
@ -32,7 +32,7 @@
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3> <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid"> <div class="p-grid">
<div v-for="theme of themes" :key="theme.key" class="p-col-12"> <div v-for="theme of themes" :key="theme.key" class="p-col-12">
<p-radioButton :inputId="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'"/> <RadioButton :inputId="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label> <label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
</div> </div>
</div> </div>

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

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

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

@ -9,22 +9,22 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Single</h3> <h3 class="first">Single</h3>
<p-selectButton v-model="selectedCity" :options="cities" optionLabel="name" /> <SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p> <p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
<h3>Multiple</h3> <h3>Multiple</h3>
<p-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>
<h3>Custom Content</h3> <h3>Custom Content</h3>
<p-selectButton v-model="selectedCar" :options="cars" optionLabel="brand"> <SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
<template slot-scope="{option}"> <template slot-scope="{option}">
<div style="text-align: center; padding: 1em; width: 125px"> <div style="text-align: center; padding: 1em; width: 125px">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="width:48px" /> <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="width:48px" />
<div style="margin-top: 1em">{{option.brand}}</div> <div style="margin-top: 1em">{{option.brand}}</div>
</div> </div>
</template> </template>
</p-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> </div>

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

@ -9,20 +9,20 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic: {{value1}}</h3> <h3 class="first">Basic: {{value1}}</h3>
<p-slider v-model="value1" /> <Slider v-model="value1" />
<h3>Input: {{value2}}</h3> <h3>Input: {{value2}}</h3>
<p-inputtext v-model.number="value2" /> <p-inputtext v-model.number="value2" />
<p-slider v-model="value2" /> <Slider v-model="value2" />
<h3>Step: {{value3}}</h3> <h3>Step: {{value3}}</h3>
<p-slider v-model="value3" :step="20" /> <Slider v-model="value3" :step="20" />
<h3>Range: {{value4}}</h3> <h3>Range: {{value4}}</h3>
<p-slider v-model="value4" :range="true" /> <Slider v-model="value4" :range="true" />
<h3>Vertical: {{value5}}</h3> <h3>Vertical: {{value5}}</h3>
<p-slider v-model="value5" orientation="vertical" /> <Slider v-model="value5" orientation="vertical" />
</div> </div>
</div> </div>
</template> </template>

8
src/views/spinner/SpinnerDemo.vue
View File

@ -9,16 +9,16 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-spinner v-model="value1" /> <Spinner v-model="value1" />
<h3>Min/Max</h3> <h3>Min/Max</h3>
<p-spinner v-model="value2" :min="0" :max="100" /> <Spinner v-model="value2" :min="0" :max="100" />
<h3>Step</h3> <h3>Step</h3>
<p-spinner v-model="value3" :step="0.25" /> <Spinner v-model="value3" :step="0.25" />
<h3>Disabled</h3> <h3>Disabled</h3>
<p-spinner v-model="value4" :disabled="true" /> <Spinner v-model="value4" :disabled="true" />
</div> </div>
</div> </div>
</template> </template>

66
src/views/tabview/TabViewDemo.vue
View File

@ -9,23 +9,23 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Default</h3> <h3 class="first">Default</h3>
<p-tabView> <TabView>
<p-tabPanel header="Godfather I"> <TabPanel header="Godfather I">
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, 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 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. 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-tabPanel> </TabPanel>
<p-tabPanel header="Godfather II"> <TabPanel header="Godfather II">
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, 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</p-tabPanel> </TabPanel>
<p-tabPanel header="Godfather III"> <TabPanel header="Godfather III">
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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</p-tabPanel> </TabPanel>
</p-tabView> </TabView>
<h3>Programmatic</h3> <h3>Programmatic</h3>
<div style="padding: .5em 0"> <div style="padding: .5em 0">
@ -33,47 +33,47 @@
<p-button icon="pi pi-chevron-right" @click="next" style="margin-left: .5em" class="p-button-secondary"/> <p-button icon="pi pi-chevron-right" @click="next" style="margin-left: .5em" class="p-button-secondary"/>
</div> </div>
<p-tabView> <TabView>
<p-tabPanel header="Godfather I" :active="activeIndex === 0"> <TabPanel header="Godfather I" :active="activeIndex === 0">
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, 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 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. 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-tabPanel> </TabPanel>
<p-tabPanel header="Godfather II" :active="activeIndex === 1"> <TabPanel header="Godfather II" :active="activeIndex === 1">
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, 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</p-tabPanel> </TabPanel>
<p-tabPanel header="Godfather III" :active="activeIndex === 2"> <TabPanel header="Godfather III" :active="activeIndex === 2">
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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</p-tabPanel> </TabPanel>
</p-tabView> </TabView>
<h3>Disabled</h3> <h3>Disabled</h3>
<p-tabView> <TabView>
<p-tabPanel header="Godfather I"> <TabPanel header="Godfather I">
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, 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 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. 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-tabPanel> </TabPanel>
<p-tabPanel header="Godfather II"> <TabPanel header="Godfather II">
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, 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</p-tabPanel> </TabPanel>
<p-tabPanel header="Godfather III"> <TabPanel header="Godfather III">
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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</p-tabPanel> </TabPanel>
<p-tabPanel header="Godfather IV" :disabled="true"></p-tabPanel> <TabPanel header="Godfather IV" :disabled="true"></TabPanel>
</p-tabView> </TabView>
<h3>Custom Headers</h3> <h3>Custom Headers</h3>
<p-tabView class="tabview-custom"> <TabView class="tabview-custom">
<p-tabPanel> <TabPanel>
<template slot="header"> <template slot="header">
<i class="pi pi-calendar"></i> <i class="pi pi-calendar"></i>
<span>Godfather I</span> <span>Godfather I</span>
@ -81,8 +81,8 @@
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, 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 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. 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-tabPanel> </TabPanel>
<p-tabPanel> <TabPanel>
<template slot="header"> <template slot="header">
<span>Godfather II</span> <span>Godfather II</span>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -90,8 +90,8 @@
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, 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</p-tabPanel> </TabPanel>
<p-tabPanel> <TabPanel>
<template slot="header"> <template slot="header">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<span>Godfather III</span> <span>Godfather III</span>
@ -100,8 +100,8 @@
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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</p-tabPanel> </TabPanel>
</p-tabView> </TabView>
</div> </div>
</div> </div>
</template> </template>

6
src/views/textarea/TextareaDemo.vue
View File

@ -9,13 +9,13 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-textarea v-model="value1" rows="5" cols="30" /> <Textarea v-model="value1" rows="5" cols="30" />
<h3>Auto Resize</h3> <h3>Auto Resize</h3>
<p-textarea v-model="value2" :autoResize="true" rows="5" cols="30" /> <Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
<h3>Disabled</h3> <h3>Disabled</h3>
<p-textarea v-model="value3" disabled rows="5" cols="30" /> <Textarea v-model="value3" disabled rows="5" cols="30" />
</div> </div>
</div> </div>
</template> </template>

4
src/views/togglebutton/ToggleButtonDemo.vue
View File

@ -9,11 +9,11 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-toggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times"/> <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
<p style="font-weight: bold">{{checked1}}</p> <p style="font-weight: bold">{{checked1}}</p>
<h3>Customized</h3> <h3>Customized</h3>
<p-toggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em"/> <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
<p style="font-weight: bold">{{checked2}}</p> <p style="font-weight: bold">{{checked2}}</p>
</div> </div>
</div> </div>

16
src/views/toolbar/ToolbarDemo.vue
View File

@ -8,20 +8,20 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<p-toolbar> <Toolbar>
<template slot="left"> <template slot="left">
<p-button label="New" icon="pi pi-plus" style="margin-right: .25em" /> <Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
<p-button label="Upload" icon="pi pi-upload" class="p-button-success" /> <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" /> <i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
<p-button label="Save" icon="pi pi-check" class="p-button-warning" /> <Button label="Save" icon="pi pi-check" class="p-button-warning" />
</template> </template>
<template slot="right"> <template slot="right">
<p-button icon="pi pi-search" style="margin-right: .25em" /> <Button icon="pi pi-search" style="margin-right: .25em" />
<p-button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" /> <Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
<p-button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" class="p-button-danger" />
</template> </template>
</p-toolbar> </Toolbar>
</div> </div>
</div> </div>
</template> </template>

2
src/views/tristatecheckbox/TriStateCheckboxDemo.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<p-triStateCheckbox v-model="value" /> <TriStateCheckbox v-model="value" />
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p> <p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
</div> </div>
</div> </div>