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

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

@ -375,7 +375,7 @@ export default {
content:` content:`
<template> <template>
<div> <div>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /> <AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@ -492,7 +492,7 @@ export default {
content:` content:`
<template> <template>
<div> <div>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /> <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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Numbers</h5> <h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge> <Badge value="8" severity="success" class="p-mr-2"></Badge>
@ -213,7 +213,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Numbers</h5> <h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" 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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Document</h5> <h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI> <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
@ -211,7 +211,7 @@ button {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Document</h5> <h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI> <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>

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

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

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

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

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

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

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

@ -111,35 +111,37 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<Card style="width: 25rem; margin-bottom: 2em"> <div>
<template #title> <Card style="width: 25rem; margin-bottom: 2em">
Simple Card <template #title>
</template> Simple Card
<template #content> </template>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt <template #content>
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
</template> quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
</Card> </template>
</Card>
<Card style="width: 25em"> <Card style="width: 25em">
<template #header> <template #header>
<img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 15rem" />
</template> </template>
<template #title> <template #title>
Advanced Card Advanced Card
</template> </template>
<template #subtitle> <template #subtitle>
Card subtitle Card subtitle
</template> </template>
<template #content> <template #content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt <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> quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
</template> </template>
<template #footer> <template #footer>
<Button icon="pi pi-check" label="Save" /> <Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /> <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template> </template>
</Card> </Card>
</div>
</template> </template>
<script> <script>
@ -158,35 +160,37 @@ p {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<Card style="width: 25rem; margin-bottom: 2em"> <div>
<template #title> <Card style="width: 25rem; margin-bottom: 2em">
Simple Card <template #title>
</template> Simple Card
<template #content> </template>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt <template #content>
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
</template> quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
</Card> </template>
</Card>
<Card style="width: 25em"> <Card style="width: 25em">
<template #header> <template #header>
<img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 15rem" />
</template> </template>
<template #title> <template #title>
Advanced Card Advanced Card
</template> </template>
<template #subtitle> <template #subtitle>
Card subtitle Card subtitle
</template> </template>
<template #content> <template #content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt <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> quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
</template> </template>
<template #footer> <template #footer>
<Button icon="pi pi-check" label="Save" /> <Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /> <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template> </template>
</Card> </Card>
</div>
</template> </template>
<script> <script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -144,7 +144,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <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" /> <Chip label="Action" class="p-mr-2 p-mb-2" />
@ -195,7 +195,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <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" /> <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: { sources: {
'options-api': { 'options-api': {
tabName: 'Source', tabName: 'Source',
content: `<template> content: `
<template>
<div> <div>
<div class="card"> <h5>Inline</h5>
<h5>Inline</h5> <ColorPicker v-model="color1" :inline="true" />
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5> <h5>Overlay</h5>
<ColorPicker v-model="color2" /> <ColorPicker v-model="color2" />
</div>
</div> </div>
</template> </template>
@ -195,15 +194,14 @@ export default {
}, },
'composition-api': { 'composition-api': {
tabName: 'Composition API', tabName: 'Composition API',
content: `<template> content: `
<template>
<div> <div>
<div class="card"> <h5>Inline</h5>
<h5>Inline</h5> <ColorPicker v-model="color1" :inline="true" />
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5> <h5>Overlay</h5>
<ColorPicker v-model="color2" /> <ColorPicker v-model="color2" />
</div>
</div> </div>
</template> </template>

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

@ -315,7 +315,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <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"> <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" /> <ContextMenu ref="menu" :model="items" />
</div> </div>
@ -471,7 +471,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <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"> <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" /> <ContextMenu ref="menu" :model="items" />
</div> </div>

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

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

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

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

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

@ -74,7 +74,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<div style="height: 800px"> <div style="height: 800px">
@ -129,8 +129,9 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<div style="height: 800px"> <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. 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> </div>

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

@ -296,7 +296,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" /> <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}"> <Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}">
@ -499,7 +499,7 @@ p {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" /> <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}"> <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: { sources: {
'options-api': { 'options-api': {
tabName: 'Source', tabName: 'Source',
content: `<template> content: `
<template>
<div> <div>
<div class="card"> <h5>Basic</h5>
<h5>Basic</h5> <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5> <h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/> <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Grouped</h5> <h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <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" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
</Dropdown> </Dropdown>
<h5>Advanced with Templating, Filtering and Clear Icon</h5> <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"> <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value"> <div class="country-item country-item-value" v-if="slotProps.value">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.value.name}}</div> <div>{{slotProps.value.name}}</div>
</div> </div>
<span v-else> <span v-else>
{{slotProps.placeholder}} {{slotProps.placeholder}}
</span> </span>
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
</Dropdown> </Dropdown>
</div>
</div> </div>
</template> </template>
@ -579,44 +578,43 @@ export default {
}, },
'composition-api': { 'composition-api': {
tabName: 'Source', tabName: 'Source',
content: `<template> content: `
<template>
<div> <div>
<div class="card"> <h5>Basic</h5>
<h5>Basic</h5> <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5> <h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/> <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Grouped</h5> <h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <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" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
</Dropdown> </Dropdown>
<h5>Advanced with Templating, Filtering and Clear Icon</h5> <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"> <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value"> <div class="country-item country-item-value" v-if="slotProps.value">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.value.name}}</div> <div>{{slotProps.value.name}}</div>
</div> </div>
<span v-else> <span v-else>
{{slotProps.placeholder}} {{slotProps.placeholder}}
</span> </span>
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
</Dropdown> </Dropdown>
</div>
</div> </div>
</template> </template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -270,7 +270,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Menubar :model="items"> <Menubar :model="items">
<template #start> <template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2"> <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', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Menubar :model="items"> <Menubar :model="items">
<template #start> <template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2"> <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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Severities</h5> <h5>Severities</h5>
<Message severity="success">Success Message Content</Message> <Message severity="success">Success Message Content</Message>
<Message severity="info">Info Message Content</Message> <Message severity="info">Info Message Content</Message>
@ -340,7 +340,7 @@ button.p-button {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Severities</h5> <h5>Severities</h5>
<Message severity="success">Success Message Content</Message> <Message severity="success">Success Message Content</Message>
<Message severity="info">Info 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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select Cities" /> <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select Cities" />
@ -588,7 +588,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select Cities" /> <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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<h5>Advanced</h5> <div class="card">
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection" <h5>Advanced</h5>
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand"> <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
<template #person="slotProps"> @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div> <template #person="slotProps">
<div class="node-content"> <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32"> <div class="node-content">
<div>{{slotProps.node.data.name}}</div> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
</div> <div>{{slotProps.node.data.name}}</div>
</template> </div>
<template #default="slotProps"> </template>
<span>{{slotProps.node.data.label}}</span> <template #default="slotProps">
</template> <span>{{slotProps.node.data.label}}</span>
</OrganizationChart> </template>
</div> </OrganizationChart>
</div>
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<OrganizationChart :value="data2"> <OrganizationChart :value="data2">
<template #default="slotProps"> <template #default="slotProps">
<span>{{slotProps.node.data.label}}</span> <span>{{slotProps.node.data.label}}</span>
</template> </template>
</OrganizationChart> </OrganizationChart>
</div>
</div> </div>
</template> </template>
@ -701,32 +703,34 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<h5>Advanced</h5> <div class="card">
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection" <h5>Advanced</h5>
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand"> <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
<template #person="slotProps"> @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div> <template #person="slotProps">
<div class="node-content"> <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32"> <div class="node-content">
<div>{{slotProps.node.data.name}}</div> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
</div> <div>{{slotProps.node.data.name}}</div>
</template> </div>
<template #default="slotProps"> </template>
<span>{{slotProps.node.data.label}}</span> <template #default="slotProps">
</template> <span>{{slotProps.node.data.label}}</span>
</OrganizationChart> </template>
</div> </OrganizationChart>
</div>
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<OrganizationChart :value="data2"> <OrganizationChart :value="data2">
<template #default="slotProps"> <template #default="slotProps">
<span>{{slotProps.node.data.label}}</span> <span>{{slotProps.node.data.label}}</span>
</template> </template>
</OrganizationChart> </OrganizationChart>
</div>
</div> </div>
</template> </template>

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

@ -175,7 +175,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /> <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', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /> <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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator> <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
@ -330,7 +330,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator> <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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<h5>Regular</h5> <h5>Regular</h5>
@ -298,7 +298,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<h5>Regular</h5> <h5>Regular</h5>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -97,7 +97,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-4 p-p-5"> <div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px"> <ScrollPanel style="width: 100%; height: 200px">
@ -203,7 +203,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-4 p-p-5"> <div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px"> <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="content-section implementation">
<div class="card"> <div class="card">
<h5>Window</h5> <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 /> <ScrollTop />
<h5>Element</h5> <h5>Element</h5>

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

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

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

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

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

@ -211,7 +211,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /> <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-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = 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', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /> <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-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = 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 { export default {
data() { data() {
return { return {
products: new Array(5) products: new Array(4)
} }
}, },
components: { components: {

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

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

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

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

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

@ -141,6 +141,12 @@ export default {
} }
<\\/script> <\\/script>
<style scoped>
.demo-container {
border: 1px solid var(--surface-d);
}
</style>
` `
}, },
'composition-api': { 'composition-api': {
@ -216,6 +222,12 @@ export default {
} }
<\\/script> <\\/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', tabName: 'Source',
content:` content:`
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<h5>Basic</h5> <h5>Basic</h5>
@ -260,8 +260,8 @@ export default {
'composition-api': { 'composition-api': {
tabName: 'Composition API', tabName: 'Composition API',
content:` content:`
<template> <template>
<div class="card"> <div>
<Toast /> <Toast />
<h5>Basic</h5> <h5>Basic</h5>

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

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

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

@ -125,7 +125,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Tags</h5> <h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag> <Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag> <Tag class="p-mr-2" severity="success" value="Success"></Tag>
@ -159,7 +159,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Tags</h5> <h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag> <Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></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', tabName: 'Source',
content: ` content: `
<template> <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> <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" /> <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div> </div>
@ -206,7 +206,7 @@ p {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <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> <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" /> <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div> </div>

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

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

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

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

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

@ -146,7 +146,7 @@ export default {
tabName: 'Source', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /> <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
@ -171,7 +171,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Basic</h5> <h5>Basic</h5>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /> <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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toolbar> <Toolbar>
<template #left> <template #left>
<Button label="New" icon="pi pi-plus" class="p-mr-2" /> <Button label="New" icon="pi pi-plus" class="p-mr-2" />
@ -150,7 +150,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<Toolbar> <Toolbar>
<template #left> <template #left>
<Button label="New" icon="pi pi-plus" class="p-mr-2" /> <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', tabName: 'Source',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Positions</h5> <h5>Positions</h5>
<div class="p-grid p-fluid"> <div class="p-grid p-fluid">
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
@ -125,7 +125,7 @@ export default {
tabName: 'Composition API', tabName: 'Composition API',
content: ` content: `
<template> <template>
<div class="card"> <div>
<h5>Positions</h5> <h5>Positions</h5>
<div class="p-grid p-fluid"> <div class="p-grid p-fluid">
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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