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

refactor

pull/1143/head
Tuğçe Küçükoğlu 2021-03-24 20:37:09 +03:00
parent 20bf1fde46
commit 9db23d8e46
88 changed files with 838 additions and 867 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -312,7 +312,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Default</h5>
<Accordion :activeIndex="0">
<AccordionTab header="Header I">
@ -441,7 +441,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Default</h5>
<Accordion :activeIndex="0">
<AccordionTab header="Header I">

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

@ -375,7 +375,7 @@ export default {
content:`
<template>
<div>
<div class="card">
<div>
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@ -492,7 +492,7 @@ export default {
content:`
<template>
<div>
<div class="card">
<div>
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />

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

@ -179,7 +179,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge>
@ -213,7 +213,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge>

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

@ -149,7 +149,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
@ -211,7 +211,7 @@ button {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>

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

@ -108,7 +108,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Breadcrumb :home="home" :model="items" />
</div>
</template>
@ -119,7 +119,7 @@ export default {
return {
home: {
icon: 'pi pi-home',
to: '/fileupload',
to: '/',
},
items: [
{label: 'Computer'},
@ -138,7 +138,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Breadcrumb :home="home" :model="items" />
</div>
</template>
@ -150,7 +150,7 @@ export default {
setup() {
const home = ref({
icon: 'pi pi-home',
to: '/fileupload',
to: '/',
});
const items = ref([
{label: 'Computer'},

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

@ -159,7 +159,7 @@ export default {
}
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 6400px) {
.p-button {
margin-bottom: .5rem;

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

@ -225,118 +225,116 @@ export default {
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
</div>
</template>
@ -368,7 +366,7 @@ export default {
}
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 640px) {
.p-button {
margin-bottom: .5rem;
@ -391,118 +389,116 @@ export default {
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
</div>
</template>
@ -535,7 +531,7 @@ export default defineComponent({});
}
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 640px) {
.p-button {
margin-bottom: .5rem;

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

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

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

@ -111,35 +111,37 @@ export default {
tabName: 'Source',
content: `
<template>
<Card style="width: 25rem; margin-bottom: 2em">
<template #title>
Simple Card
</template>
<template #content>
<p>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!</p>
</template>
</Card>
<div>
<Card style="width: 25rem; margin-bottom: 2em">
<template #title>
Simple Card
</template>
<template #content>
<p>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!</p>
</template>
</Card>
<Card style="width: 25em">
<template #header>
<img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" />
</template>
<template #title>
Advanced Card
</template>
<template #subtitle>
Card subtitle
</template>
<template #content>
<p>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!</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template>
</Card>
<Card style="width: 25em">
<template #header>
<img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 15rem" />
</template>
<template #title>
Advanced Card
</template>
<template #subtitle>
Card subtitle
</template>
<template #content>
<p>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!</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template>
</Card>
</div>
</template>
<script>
@ -158,35 +160,37 @@ p {
tabName: 'Composition API',
content: `
<template>
<Card style="width: 25rem; margin-bottom: 2em">
<template #title>
Simple Card
</template>
<template #content>
<p>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!</p>
</template>
</Card>
<div>
<Card style="width: 25rem; margin-bottom: 2em">
<template #title>
Simple Card
</template>
<template #content>
<p>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!</p>
</template>
</Card>
<Card style="width: 25em">
<template #header>
<img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" />
</template>
<template #title>
Advanced Card
</template>
<template #subtitle>
Card subtitle
</template>
<template #content>
<p>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!</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template>
</Card>
<Card style="width: 25em">
<template #header>
<img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 15rem" />
</template>
<template #title>
Advanced Card
</template>
<template #subtitle>
Card subtitle
</template>
<template #content>
<p>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!</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template>
</Card>
</div>
</template>
<script>

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

@ -300,7 +300,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
@ -356,7 +356,7 @@ export default {
</div>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="430px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h5>Vertical</h5>
@ -498,7 +498,7 @@ export default {
</div>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="430px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h5>Vertical</h5>

64
src/views/cascadeselect/CascadeSelectDoc.vue
View File

@ -341,24 +341,22 @@ export default {
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
</template>
@ -462,24 +460,22 @@ img {
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
</template>

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

@ -11,7 +11,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<div class="card">
<h5>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />
@ -144,7 +144,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<div class="card">
<h5>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />

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

@ -11,7 +11,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Chart type="bar" :data="chartData"/>
</div>
</template>
@ -53,7 +53,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Chart type="bar" :data="chartData"/>
</div>
</template>

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

@ -11,7 +11,7 @@ export default {
tabName :'Source',
content: `
<template>
<div class="card">
<div>
<Chart type="doughnut" :data="chartData" />
</div>
</template>
@ -40,7 +40,7 @@ export default {
tabName :'Composition API',
content: `
<template>
<div class="card">
<div>
<Chart type="doughnut" :data="chartData" />
</div>
</template>

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

@ -11,7 +11,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div
<div class="card">
<h5>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />
@ -123,7 +123,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<div class="card">
<h5>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />

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

@ -12,7 +12,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Chart type="pie" :data="chartData" />
</div>
</template>
@ -41,7 +41,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Chart type="pie" :data="chartData" />
</div>
</template>

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

@ -11,7 +11,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Chart type="polarArea" :data="chartData" />
</div>
</template>
@ -38,7 +38,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Chart type="polarArea" :data="chartData" />
</div>
</template>

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

@ -11,7 +11,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Chart type="radar" :data="chartData" />
</div>
</template>
@ -55,7 +55,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Chart type="radar" :data="chartData" />
</div>
</template>

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

@ -114,38 +114,37 @@ export default {
sources: {
'options-api': {
tabName: 'Source',
content: `<template>
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
</div>
</template>
@ -168,38 +167,37 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
</div>
</template>

4
src/views/chip/ChipDoc.vue
View File

@ -144,7 +144,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Action" class="p-mr-2 p-mb-2" />
@ -195,7 +195,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Action" class="p-mr-2 p-mb-2" />

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

@ -169,15 +169,14 @@ export default {
sources: {
'options-api': {
tabName: 'Source',
content: `<template>
content: `
<template>
<div>
<div class="card">
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
</template>
@ -195,15 +194,14 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
content: `
<template>
<div>
<div class="card">
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
</template>

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

@ -315,7 +315,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>
@ -471,7 +471,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>

30
src/views/datatable/DataTableBasicDoc.vue
View File

@ -1,5 +1,5 @@
<template>
<AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
<AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</template>
<script>
@ -12,14 +12,12 @@ export default {
content: `
<template>
<div>
<div class="card">
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
</template>
@ -48,14 +46,12 @@ export default {
content: `
<template>
<div>
<div class="card">
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
</template>

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

@ -9,7 +9,7 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="products" class="p-datatable-sm">
<DataTable :value="products" class="p-datatable-sm" responsiveLayout="scroll">
<template #header>
Small Table
</template>
@ -21,7 +21,7 @@
</div>
<div class="card">
<DataTable :value="products">
<DataTable :value="products" responsiveLayout="scroll">
<template #header>
Normal Table
</template>
@ -33,7 +33,7 @@
</div>
<div class="card">
<DataTable :value="products" class="p-datatable-lg">
<DataTable :value="products" class="p-datatable-lg" responsiveLayout="scroll">
<template #header>
Large Table
</template>
@ -64,7 +64,7 @@ export default {
<template>
<div>
<div class="card">
<DataTable :value="products" class="p-datatable-sm">
<DataTable :value="products" class="p-datatable-sm" responsiveLayout="scroll">
<template #header>
Small Table
</template>
@ -76,7 +76,7 @@ export default {
</div>
<div class="card">
<DataTable :value="products">
<DataTable :value="products" responsiveLayout="scroll">
<template #header>
Normal Table
</template>
@ -88,7 +88,7 @@ export default {
</div>
<div class="card">
<DataTable :value="products" class="p-datatable-lg">
<DataTable :value="products" class="p-datatable-lg" responsiveLayout="scroll">
<template #header>
Large Table
</template>
@ -127,7 +127,7 @@ export default {
<template>
<div>
<div class="card">
<DataTable :value="products" class="p-datatable-sm">
<DataTable :value="products" class="p-datatable-sm" responsiveLayout="scroll">
<template #header>
Small Table
</template>
@ -139,7 +139,7 @@ export default {
</div>
<div class="card">
<DataTable :value="products">
<DataTable :value="products" responsiveLayout="scroll">
<template #header>
Normal Table
</template>
@ -151,7 +151,7 @@ export default {
</div>
<div class="card">
<DataTable :value="products" class="p-datatable-lg">
<DataTable :value="products" class="p-datatable-lg" responsiveLayout="scroll">
<template #header>
Large Table
</template>

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

@ -74,7 +74,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toast />
<div style="height: 800px">
@ -129,8 +129,9 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toast />
<div style="height: 800px">
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
</div>

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

@ -296,7 +296,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}">
@ -499,7 +499,7 @@ p {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}">

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

@ -464,44 +464,43 @@ export default {
sources: {
'options-api': {
tabName: 'Source',
content: `<template>
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div>
</div>
</template>
</Dropdown>
<h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div>
</div>
</template>
</Dropdown>
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.value.name}}</div>
</div>
<span v-else>
{{slotProps.placeholder}}
</span>
</template>
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Dropdown>
</div>
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.value.name}}</div>
</div>
<span v-else>
{{slotProps.placeholder}}
</span>
</template>
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Dropdown>
</div>
</template>
@ -579,44 +578,43 @@ export default {
},
'composition-api': {
tabName: 'Source',
content: `<template>
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div>
</div>
</template>
</Dropdown>
<h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div>
</div>
</template>
</Dropdown>
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.value.name}}</div>
</div>
<span v-else>
{{slotProps.placeholder}}
</span>
</template>
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Dropdown>
</div>
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.value.name}}</div>
</div>
<span v-else>
{{slotProps.placeholder}}
</span>
</template>
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Dropdown>
</div>
</template>

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

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

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

@ -35,13 +35,6 @@
import FieldsetDoc from './FieldsetDoc';
export default {
data() {
return {
value1: '',
value2: '',
value3: 'PrimeVue'
}
},
components: {
'FieldsetDoc': FieldsetDoc
}

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

@ -180,7 +180,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Regular</h5>
<Fieldset legend="Header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -201,13 +201,6 @@ export default {
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: 'PrimeVue'
}
}
}
<\\/script>
@ -220,8 +213,9 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="card">
content: `
<template>
<div>
<h5>Regular</h5>
<Fieldset legend="Header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -241,16 +235,7 @@ export default {
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref('');
const value2 = ref('');
const value3 = ref('PrimeVue');
return { value1, value2, value3 }
}
}
<\\/script>

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

@ -341,7 +341,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Advanced</h5>
@ -374,7 +374,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Advanced</h5>

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

@ -346,6 +346,8 @@ export default {
value9: null,
value10: null,
value11: null,
valueIconLeft: null,
valueIconRight: null,
selectedCity: null,
cascadeCountries: [
{
@ -556,7 +558,7 @@ export default {
<script>
import { ref, onMounted } from 'vue';
import CountryService from '../service/CountryService';
import CountryService from './service/CountryService';
export default {
setup() {
@ -667,10 +669,10 @@ export default {
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
filteredCountries.value = [...countries.value];
}
else {
this.filteredCountries = this.countries.filter((country) => {
filteredCountries.value = countries.value.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}

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

@ -211,7 +211,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<FullCalendar :events="events" :options="options" />
</div>
</template>
@ -262,7 +262,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<FullCalendar :events="events" :options="options" />
</div>
</template>

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

@ -194,7 +194,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
@ -260,7 +260,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Input</h5>
<Inplace :closable="true">
<template #display>

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

@ -11,7 +11,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
@ -133,7 +133,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">

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

@ -1,5 +1,5 @@
<template>
<AppDoc name="InputMaskDoc" :sources="sources">
<AppDoc name="InputMaskDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import InputMask from 'primevue/inputmask';
@ -131,7 +131,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
@ -186,7 +186,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>

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

@ -363,8 +363,7 @@ export default {
tabName : 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-3">
@ -501,8 +500,7 @@ export default {
tabName : 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-3">

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

@ -104,7 +104,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<InputSwitch v-model="checked1" />
@ -129,7 +129,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<InputSwitch v-model="checked1" />

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

@ -152,7 +152,7 @@ export default {
tabName: 'Source',
content:`
<template>
<div class="card">
<div>
<h5>Basic</h5>
<InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
@ -236,7 +236,7 @@ export default {
tabName: 'Composition API',
content:`
<template>
<div class="card">
<div>
<h5>Basic</h5>
<InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span>

4
src/views/invalid/InvalidDemo.vue
View File

@ -160,7 +160,7 @@ export default {
tabName :'Source',
content: `
<template>
<div class="card">
<div>
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
@ -333,7 +333,7 @@ export default {
tabName :'Composition API',
content: `
<template>
<div class="card">
<div>
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />

4
src/views/knob/KnobDoc.vue
View File

@ -210,7 +210,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<div class="p-grid p-formgrid p-text-center">
<div class="p-field p-col-12 p-md-4">
<h5>Basic</h5>
@ -275,7 +275,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<div class="p-grid p-formgrid p-text-center">
<div class="p-field p-col-12 p-md-4">
<h5>Basic</h5>

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

@ -358,7 +358,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
@ -447,7 +447,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />

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

@ -254,7 +254,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Horizontal</h5>
<MegaMenu :model="items" />
@ -389,7 +389,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Horizontal</h5>
<MegaMenu :model="items" />

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

@ -213,7 +213,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Inline</h5>
@ -281,7 +281,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Inline</h5>

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

@ -270,7 +270,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Menubar :model="items">
<template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
@ -424,7 +424,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Menubar :model="items">
<template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">

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

@ -259,7 +259,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Severities</h5>
<Message severity="success">Success Message Content</Message>
<Message severity="info">Info Message Content</Message>
@ -340,7 +340,7 @@ button.p-button {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Severities</h5>
<Message severity="success">Success Message Content</Message>
<Message severity="info">Info Message Content</Message>

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

@ -455,7 +455,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select Cities" />
@ -588,7 +588,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select Cities" />

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

@ -488,32 +488,34 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
<div class="card">
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
<div class="card">
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
<div class="card">
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
</div>
</template>
@ -701,32 +703,34 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
<div class="card">
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
<div class="card">
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
<div class="card">
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
</div>
</template>

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

@ -175,7 +175,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
@ -245,7 +245,7 @@ button {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />

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

@ -277,7 +277,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
@ -330,7 +330,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>

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

@ -208,7 +208,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Regular</h5>
@ -298,7 +298,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Regular</h5>

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

@ -227,7 +227,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<PanelMenu :model="items" />
</div>
</template>
@ -369,7 +369,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<PanelMenu :model="items" />
</div>
</template>

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

@ -215,7 +215,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Password v-model="value1" :feedback="false" />
@ -269,7 +269,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Password v-model="value1" :feedback="false" />

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

@ -268,7 +268,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<PickList v-model="products" listStyle="height:342px" dataKey="id">
<template #sourceHeader>
Available
@ -370,7 +370,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<PickList v-model="products" listStyle="height:342px" dataKey="id">
<template #sourceHeader>
Available

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

@ -120,7 +120,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Dynamic</h5>
<ProgressBar :value="value1" />
@ -168,8 +168,9 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="card">
content: `
<template>
<div>
<h5>Dynamic</h5>
<ProgressBar :value="value1" />

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

@ -111,7 +111,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<ProgressSpinner />
@ -130,7 +130,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<ProgressSpinner />

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

@ -112,7 +112,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
@ -164,7 +164,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />

4
src/views/rating/RatingDoc.vue
View File

@ -140,7 +140,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic {{val1}}</h5>
<Rating v-model="val1" />
@ -171,7 +171,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic {{val1}}</h5>
<Rating v-model="val1" />

2
src/views/responsive/ResponsiveDemo.vue
View File

@ -516,7 +516,7 @@
</div>
</div>
<AppDoc name="ResponsiveDemo" :sources="sources" :service="['CustomerService', 'CountryService', 'ProductService']" :data="['countries', 'customers-large', 'products-small']"></AppDoc>
<AppDoc name="ResponsiveDemo" :sources="sources" :service="['CustomerService', 'CountryService', 'ProductService']" :data="['customers-large', 'countries', 'products-small']"></AppDoc>
</div>
</template>

4
src/views/scrollpanel/ScrollPanelDoc.vue
View File

@ -97,7 +97,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<div class="p-grid">
<div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px">
@ -203,7 +203,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<div class="p-grid">
<div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px">

2
src/views/scrolltop/ScrollTopDemo.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<h5>Window</h5>
<p>Scroll down the page to display the ScrollTo component.</p>
<p>Scroll down the page to display the ScrollTop component.</p>
<ScrollTop />
<h5>Element</h5>

12
src/views/scrolltop/ScrollTopDoc.vue
View File

@ -109,11 +109,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Window</h5>
<p>Scroll down the page to display the ScrollTo component.</p>
<ScrollTop />
<div>
<h5>Element</h5>
<ScrollPanel style="width: 250px; height: 200px">
<p>
@ -161,11 +157,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Window</h5>
<p>Scroll down the page to display the ScrollTo component.</p>
<ScrollTop />
<div>
<h5>Element</h5>
<ScrollPanel style="width: 250px; height: 200px">
<p>

4
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -179,7 +179,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Single Selection</h5>
<SelectButton v-model="value1" :options="options" />
@ -223,7 +223,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Single Selection</h5>
<SelectButton v-model="value1" :options="options" />

4
src/views/sidebar/SidebarDoc.vue
View File

@ -211,7 +211,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" />
@ -259,7 +259,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" />

2
src/views/skeleton/SkeletonDemo.vue
View File

@ -150,7 +150,7 @@ import SkeletonDoc from './SkeletonDoc';
export default {
data() {
return {
products: new Array(5)
products: new Array(4)
}
},
components: {

4
src/views/skeleton/SkeletonDoc.vue
View File

@ -273,7 +273,7 @@ export default {
export default {
data() {
return {
products: new Array(5)
products: new Array(4)
}
}
}
@ -432,7 +432,7 @@ import { ref } from 'vue';
export default {
setup() {
const products = ref(new Array(5));
const products = ref(new Array(4));
return { products }
}

4
src/views/slider/SliderDoc.vue
View File

@ -183,7 +183,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />
@ -229,7 +229,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />

12
src/views/spacing/SpacingDoc.vue
View File

@ -141,6 +141,12 @@ export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 1px solid var(--surface-d);
}
</style>
`
},
'composition-api': {
@ -216,6 +222,12 @@ export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 1px solid var(--surface-d);
}
</style>
`
}
}

6
src/views/splitbutton/SplitButtonDoc.vue
View File

@ -192,7 +192,7 @@ export default {
tabName: 'Source',
content:`
<template>
<div class="card">
<div>
<Toast />
<h5>Basic</h5>
@ -260,8 +260,8 @@ export default {
'composition-api': {
tabName: 'Composition API',
content:`
<template>
<div class="card">
<template>
<div>
<Toast />
<h5>Basic</h5>

4
src/views/tabmenu/TabMenuDoc.vue
View File

@ -110,7 +110,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<TabMenu :model="items" />
<router-view />
</div>
@ -162,7 +162,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<TabMenu :model="items" />
<router-view />
</div>

4
src/views/tag/TagDoc.vue
View File

@ -125,7 +125,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag>
@ -159,7 +159,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag>

4
src/views/terminal/TerminalDoc.vue
View File

@ -134,7 +134,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div>
@ -206,7 +206,7 @@ p {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div>

4
src/views/textarea/TextareaDoc.vue
View File

@ -85,7 +85,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Textarea v-model="value1" rows="5" cols="30" />
@ -114,7 +114,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Textarea v-model="value1" rows="5" cols="30" />

4
src/views/tieredmenu/TieredMenuDoc.vue
View File

@ -304,7 +304,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Inline</h5>
<TieredMenu :model="items" />
@ -464,7 +464,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Inline</h5>
<TieredMenu :model="items" />

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

@ -146,7 +146,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
@ -171,7 +171,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />

4
src/views/toolbar/ToolbarDoc.vue
View File

@ -89,7 +89,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toolbar>
<template #left>
<Button label="New" icon="pi pi-plus" class="p-mr-2" />
@ -150,7 +150,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toolbar>
<template #left>
<Button label="New" icon="pi pi-plus" class="p-mr-2" />

4
src/views/tooltip/TooltipDoc.vue
View File

@ -90,7 +90,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Positions</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
@ -125,7 +125,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Positions</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">

4
src/views/tree/TreeDoc.vue
View File

@ -740,7 +740,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Tree :value="nodes"></Tree>
@ -804,7 +804,7 @@ button {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Basic</h5>
<Tree :value="nodes"></Tree>

4
src/views/tree/TreeFilterDemo.vue
View File

@ -34,7 +34,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<h5>Lenient Filter</h5>
<Tree :value="nodes" :filter="true" filterMode="lenient"></Tree>
@ -88,7 +88,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<h5>Lenient Filter</h5>
<Tree :value="nodes" :filter="true" filterMode="lenient"></Tree>

4
src/views/tree/TreeLazyDemo.vue
View File

@ -30,7 +30,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Tree :value="nodes" @nodeExpand="onNodeExpand" :loading="loading"></Tree>
</div>
</template>
@ -107,7 +107,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Tree :value="nodes" @nodeExpand="onNodeExpand" :loading="loading"></Tree>
</div>
</template>

4
src/views/tree/TreeSelectionDemo.vue
View File

@ -48,7 +48,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Single Selection</h5>
@ -106,7 +106,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Toast />
<h5>Single Selection</h5>

4
src/views/tree/TreeTemplatingDemo.vue
View File

@ -55,7 +55,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<Tree :value="nodes">
<template #default="slotProps">
<b>{{slotProps.node.label}}</b>
@ -115,7 +115,7 @@ button {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<Tree :value="nodes">
<template #default="slotProps">
<b>{{slotProps.node.label}}</b>

10
src/views/treetable/TreeTableColToggleDemo.vue
View File

@ -37,8 +37,9 @@ export default {
sources: {
'options-api': {
tabName: 'Source',
content: `<template>
<div class="card">
content: `
<template>
<div>
<TreeTable :value="nodes">
<template #header>
<div style="text-align:left">
@ -87,8 +88,9 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="card">
content: `
<template>
<div>
<TreeTable :value="nodes">
<template #header>
<div style="text-align:left">

13
src/views/treetable/TreeTableLazyDemo.vue
View File

@ -36,7 +36,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
@nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
<Column field="name" header="Name" :expander="true"></Column>
@ -138,8 +138,9 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="card">
content: `
<template>
<div>
<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
@nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
<Column field="name" header="Name" :expander="true"></Column>
@ -172,7 +173,7 @@ export default {
loading.value = true;
setTimeout(() => {
let lazyNode = {...node.value};
let lazyNode = {...node};
lazyNode.children = [
{
@ -191,7 +192,7 @@ export default {
}
];
let nodes = nodes.value.map(n => {
let newNodes = nodes.value.map(n => {
if (n.key === node.key) {
n = lazyNode;
}
@ -200,7 +201,7 @@ export default {
});
loading.value = false;
nodes.value = nodes;
nodes.value = newNodes;
}, 250);
}
};

4
src/views/treetable/TreeTablePaginatorDemo.vue
View File

@ -31,7 +31,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<TreeTable :value="nodes" :paginator="true" :rows="10">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
@ -82,7 +82,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<TreeTable :value="nodes" :paginator="true" :rows="10">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>

4
src/views/treetable/TreeTableResponsiveDemo.vue
View File

@ -42,7 +42,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<TreeTable :value="nodes" class="p-treetable-responsive">
<template #header>
Responsive
@ -100,7 +100,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<TreeTable :value="nodes" class="p-treetable-responsive">
<template #header>
Responsive

4
src/views/treetable/TreeTableTemplatingDemo.vue
View File

@ -51,7 +51,7 @@ export default {
tabName: 'Source',
content: `
<template>
<div class="card">
<div>
<TreeTable :value="nodes">
<template #header>
FileSystem
@ -101,7 +101,7 @@ export default {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div>
<TreeTable :value="nodes">
<template #header>
FileSystem

10
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View File

@ -82,8 +82,9 @@ export default {
sources: {
'options-api': {
tabName: 'Source',
content: `<template>
<div class="card">
content: `
<template>
<div>
<div class="p-field-checkbox p-m-0">
<TriStateCheckbox v-model="value" />
<label>{{value == null ? 'null' : value}}</label>
@ -104,8 +105,9 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="card">
content: `
<template>
<div>
<div class="p-field-checkbox p-m-0">
<TriStateCheckbox v-model="value" />
<label>{{value == null ? 'null' : value}}</label>