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

View File

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

View File

@ -9,44 +9,44 @@
<div class="content-section implementation">
<h3 class="first">Default</h3>
<p-accordion>
<p-accordionTab header="Godfather I">
<Accordion>
<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,
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>
<p-accordionTab header="Godfather II">
</AccordionTab>
<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,
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>
<p-accordionTab header="Godfather III">
</AccordionTab>
<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
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>
</p-accordion>
</AccordionTab>
</Accordion>
<h3>Multiple</h3>
<p-accordion :multiple="true">
<p-accordionTab header="Godfather I">
<Accordion :multiple="true">
<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,
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>
<p-accordionTab header="Godfather II">
</AccordionTab>
<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,
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>
<p-accordionTab header="Godfather III">
</AccordionTab>
<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
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>
<p-accordionTab header="Godfather IV" :disabled="true">
</p-accordionTab>
</p-accordion>
</AccordionTab>
<AccordionTab header="Godfather IV" :disabled="true">
</AccordionTab>
</Accordion>
<h3>Programmatic</h3>
<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" />
</div>
<p-accordion :multiple="true">
<p-accordionTab header="Godfather I" :active="active1">
<Accordion :multiple="true">
<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,
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>
<p-accordionTab header="Godfather II" :active="active2">
</AccordionTab>
<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,
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>
<p-accordionTab header="Godfather III" :active="active3">
</AccordionTab>
<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
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>
</p-accordion>
</AccordionTab>
</Accordion>
<h3>Custom Headers</h3>
<p-accordion class="accordion-custom">
<p-accordionTab>
<Accordion class="accordion-custom">
<AccordionTab>
<template slot="header">
<i class="pi pi-calendar"></i>
<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,
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>
<p-accordionTab>
</AccordionTab>
<AccordionTab>
<template slot="header">
<i class="pi pi-user"></i>
<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,
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>
<p-accordionTab>
</AccordionTab>
<AccordionTab>
<template slot="header">
<i class="pi pi-search"></i>
<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
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>
</p-accordion>
</AccordionTab>
</Accordion>
</div>
</div>

View File

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

View File

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

View File

@ -9,25 +9,25 @@
<div class="content-section implementation">
<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>
<h3>Multiple</h3>
<div class="p-grid">
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
</div>
@ -36,7 +36,7 @@
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid">
<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>
</div>
</div>

View File

@ -9,17 +9,17 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<p-chips v-model="value1" />
<Chips v-model="value1" />
<h3>Template</h3>
<p-chips v-model="value2">
<Chips v-model="value2">
<template slot-scope="{value}">
<div>
<span>{{value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</p-chips>
</Chips>
</div>
</div>
</template>

View File

@ -9,20 +9,20 @@
<div class="content-section implementation">
<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>
<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>
<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}">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
</div>
</template>
</p-dropdown>
</Dropdown>
</div>
</div>
</template>

View File

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

View File

@ -9,20 +9,20 @@
<div class="content-section implementation">
<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.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-fieldset>
</Fieldset>
<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.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-fieldset>
</Fieldset>
</div>
</div>
</template>

View File

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

View File

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

View File

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

View File

@ -9,17 +9,17 @@
<div class="content-section implementation">
<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>
<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}">
<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" />
<span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
</div>
</template>
</p-listbox>
</Listbox>
</div>
</div>
</template>

View File

@ -9,10 +9,10 @@
<div class="content-section implementation">
<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>
<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}">
<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'" />
@ -28,7 +28,7 @@
<span>{{option.brand}}</span>
</div>
</template>
</p-multiSelect>
</MultiSelect>
</div>
</div>
</template>

View File

@ -9,20 +9,20 @@
<div class="content-section implementation">
<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.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-panel>
</Panel>
<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.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-panel>
</Panel>
</div>
</div>
</template>

View File

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

View File

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

View File

@ -11,19 +11,19 @@
<h3 class="first">Basic</h3>
<div class="p-grid">
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
</div>
@ -32,7 +32,7 @@
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid">
<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>
</div>
</div>

View File

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

View File

@ -9,22 +9,22 @@
<div class="content-section implementation">
<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>
<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>
<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}">
<div style="text-align: center; padding: 1em; width: 125px">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="width:48px" />
<div style="margin-top: 1em">{{option.brand}}</div>
</div>
</template>
</p-selectButton>
</SelectButton>
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
</div>
</div>

View File

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

View File

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

View File

@ -9,23 +9,23 @@
<div class="content-section implementation">
<h3 class="first">Default</h3>
<p-tabView>
<p-tabPanel header="Godfather I">
<TabView>
<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,
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-tabPanel>
<p-tabPanel header="Godfather II">
</TabPanel>
<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,
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-tabPanel>
<p-tabPanel header="Godfather III">
</TabPanel>
<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
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-tabPanel>
</p-tabView>
</TabPanel>
</TabView>
<h3>Programmatic</h3>
<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"/>
</div>
<p-tabView>
<p-tabPanel header="Godfather I" :active="activeIndex === 0">
<TabView>
<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,
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-tabPanel>
<p-tabPanel header="Godfather II" :active="activeIndex === 1">
</TabPanel>
<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,
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-tabPanel>
<p-tabPanel header="Godfather III" :active="activeIndex === 2">
</TabPanel>
<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
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-tabPanel>
</p-tabView>
</TabPanel>
</TabView>
<h3>Disabled</h3>
<p-tabView>
<p-tabPanel header="Godfather I">
<TabView>
<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,
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-tabPanel>
<p-tabPanel header="Godfather II">
</TabPanel>
<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,
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-tabPanel>
<p-tabPanel header="Godfather III">
</TabPanel>
<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
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-tabPanel>
<p-tabPanel header="Godfather IV" :disabled="true"></p-tabPanel>
</p-tabView>
</TabPanel>
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
</TabView>
<h3>Custom Headers</h3>
<p-tabView class="tabview-custom">
<p-tabPanel>
<TabView class="tabview-custom">
<TabPanel>
<template slot="header">
<i class="pi pi-calendar"></i>
<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,
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-tabPanel>
<p-tabPanel>
</TabPanel>
<TabPanel>
<template slot="header">
<span>Godfather II</span>
<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,
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-tabPanel>
<p-tabPanel>
</TabPanel>
<TabPanel>
<template slot="header">
<i class="pi pi-search"></i>
<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
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-tabPanel>
</p-tabView>
</TabPanel>
</TabView>
</div>
</div>
</template>

View File

@ -9,13 +9,13 @@
<div class="content-section implementation">
<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>
<p-textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
<h3>Disabled</h3>
<p-textarea v-model="value3" disabled rows="5" cols="30" />
<Textarea v-model="value3" disabled rows="5" cols="30" />
</div>
</div>
</template>

View File

@ -9,11 +9,11 @@
<div class="content-section implementation">
<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>
<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>
</div>
</div>

View File

@ -8,20 +8,20 @@
</div>
<div class="content-section implementation">
<p-toolbar>
<Toolbar>
<template slot="left">
<p-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="New" icon="pi pi-plus" style="margin-right: .25em" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
<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 slot="right">
<p-button icon="pi pi-search" style="margin-right: .25em" />
<p-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-search" style="margin-right: .25em" />
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
<Button icon="pi pi-times" class="p-button-danger" />
</template>
</p-toolbar>
</Toolbar>
</div>
</div>
</template>

View File

@ -8,7 +8,7 @@
</div>
<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>
</div>
</div>