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

Button updates

pull/3699/head
Tuğçe Küçükoğlu 2023-03-03 15:15:20 +03:00
parent daa4e9fd77
commit 98f222cb90
47 changed files with 418 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
doc/accordion/ControlledDoc.vue
View File

@ -4,9 +4,9 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="pb-3"> <div class="pb-3">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<Accordion v-model:activeIndex="active"> <Accordion v-model:activeIndex="active">
@ -41,9 +41,9 @@ export default {
code: { code: {
basic: ` basic: `
<div class="pb-3"> <div class="pb-3">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<Accordion v-model:activeIndex="active"> <Accordion v-model:activeIndex="active">
@ -70,9 +70,9 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="pb-3"> <div class="pb-3">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<Accordion v-model:activeIndex="active"> <Accordion v-model:activeIndex="active">
@ -111,9 +111,9 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="pb-3"> <div class="pb-3">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<Accordion v-model:activeIndex="active"> <Accordion v-model:activeIndex="active">

8
doc/badge/ButtonDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center gap-2">
<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" severity="warning" badge="8" badgeClass="p-badge-danger" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -16,12 +16,12 @@ export default {
code: { code: {
basic: ` basic: `
<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" severity="warning" badge="8" badgeClass="p-badge-danger" />`,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center gap-2">
<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" severity="warning" badge="8" badgeClass="p-badge-danger" />
</div> </div>
</template> </template>
@ -32,7 +32,7 @@ export default {
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center gap-2">
<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" severity="warning" badge="8" badgeClass="p-badge-danger" />
</div> </div>
</template> </template>

8
doc/button/BadgesDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Button type="button" label="Emails" badge="8" /> <Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" /> <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -16,12 +16,12 @@ export default {
code: { code: {
basic: ` basic: `
<Button type="button" label="Emails" badge="8" /> <Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" />`, <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />`,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Button type="button" label="Emails" badge="8" /> <Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" /> <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
</div> </div>
</template> </template>
@ -31,7 +31,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Button type="button" label="Emails" badge="8" /> <Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" /> <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
</div> </div>
</template> </template>

8
doc/card/AdvancedDoc.vue
View File

@ -17,7 +17,7 @@
</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: 0.5em" /> <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
</template> </template>
</Card> </Card>
</div> </div>
@ -44,7 +44,7 @@ export default {
</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: 0.5em" /> <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
</template> </template>
</Card>`, </Card>`,
options: ` options: `
@ -64,7 +64,7 @@ export default {
</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: 0.5em" /> <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
</template> </template>
</Card> </Card>
</div> </div>
@ -89,7 +89,7 @@ export default {
</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: 0.5em" /> <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
</template> </template>
</Card> </Card>
</div> </div>

20
doc/carousel/BasicDoc.vue
View File

@ -15,9 +15,8 @@
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -64,9 +63,8 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2"
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -86,9 +84,8 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -159,9 +156,8 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>

24
doc/carousel/CircularDoc.vue
View File

@ -15,9 +15,9 @@
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -64,9 +64,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -86,9 +86,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -159,9 +159,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>

24
doc/carousel/NumScrollDoc.vue
View File

@ -15,9 +15,9 @@
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -64,9 +64,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -86,9 +86,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -159,9 +159,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>

24
doc/carousel/ResponsiveDoc.vue
View File

@ -18,9 +18,9 @@
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -67,9 +67,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -89,9 +89,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -162,9 +162,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>

24
doc/carousel/VerticalDoc.vue
View File

@ -15,9 +15,9 @@
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -65,9 +65,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -88,9 +88,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>
@ -162,9 +162,9 @@ export default {
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6> <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5"> <div class="mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" /> <Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" /> <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" rounded severity="help" />
</div> </div>
</div> </div>
</div> </div>

64
doc/confirmdialog/PositionDoc.vue
View File

@ -5,18 +5,18 @@
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -30,18 +30,18 @@ export default {
basic: ` basic: `
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div>`, </div>`,
options: ` options: `
<template> <template>
@ -49,18 +49,18 @@ export default {
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -92,18 +92,18 @@ export default {
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div> </div>
</div> </div>
</template> </template>

8
doc/confirmpopup/BasicDoc.vue
View File

@ -5,7 +5,7 @@
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -19,7 +19,7 @@ export default {
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
</div>`, </div>`,
options: ` options: `
<template> <template>
@ -27,7 +27,7 @@ export default {
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
</div> </div>
</template> </template>
@ -70,7 +70,7 @@ export default {
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
</div> </div>
</template> </template>

16
doc/datatable/RowExpansionDoc.vue
View File

@ -13,8 +13,8 @@
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem"> <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header> <template #header>
<div class="flex flex-wrap justify-content-end gap-2"> <div class="flex flex-wrap justify-content-end gap-2">
<Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" /> <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div> </div>
</template> </template>
<Column expander style="width: 5rem" /> <Column expander style="width: 5rem" />
@ -84,8 +84,8 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem"> @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header> <template #header>
<div class="flex flex-wrap justify-content-end gap-2"> <div class="flex flex-wrap justify-content-end gap-2">
<Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" /> <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div> </div>
</template> </template>
<Column expander style="width: 5rem" /> <Column expander style="width: 5rem" />
@ -144,8 +144,8 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem"> @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header> <template #header>
<div class="flex flex-wrap justify-content-end gap-2"> <div class="flex flex-wrap justify-content-end gap-2">
<Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" /> <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div> </div>
</template> </template>
<Column expander style="width: 5rem" /> <Column expander style="width: 5rem" />
@ -273,8 +273,8 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem"> @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header> <template #header>
<div class="flex flex-wrap justify-content-end gap-2"> <div class="flex flex-wrap justify-content-end gap-2">
<Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" /> <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div> </div>
</template> </template>
<Column expander style="width: 5rem" /> <Column expander style="width: 5rem" />

8
doc/datatable/TemplateDoc.vue
View File

@ -7,7 +7,7 @@
<template #header> <template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span> <span class="text-xl text-900 font-bold">Products</span>
<Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
@ -51,7 +51,7 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span> <span class="text-xl text-900 font-bold">Products</span>
<Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
@ -85,7 +85,7 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span> <span class="text-xl text-900 font-bold">Products</span>
<Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
@ -156,7 +156,7 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span> <span class="text-xl text-900 font-bold">Products</span>
<Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>

24
doc/datatable/filter/AdvancedFilterDoc.vue
View File

@ -6,7 +6,7 @@
<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id" filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id" filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -34,10 +34,10 @@
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" /> <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
</template> </template>
<template #filterclear="{ filterCallback }"> <template #filterclear="{ filterCallback }">
<Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button> <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
</template> </template>
<template #filterapply="{ filterCallback }"> <template #filterapply="{ filterCallback }">
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
@ -144,7 +144,7 @@ export default {
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -172,10 +172,10 @@ export default {
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" /> <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
</template> </template>
<template #filterclear="{ filterCallback }"> <template #filterclear="{ filterCallback }">
<Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button> <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
</template> </template>
<template #filterapply="{ filterCallback }"> <template #filterapply="{ filterCallback }">
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
@ -256,7 +256,7 @@ export default {
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -284,10 +284,10 @@ export default {
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" /> <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
</template> </template>
<template #filterclear="{ filterCallback }"> <template #filterclear="{ filterCallback }">
<Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button> <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
</template> </template>
<template #filterapply="{ filterCallback }"> <template #filterapply="{ filterCallback }">
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
@ -460,7 +460,7 @@ export default {
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -488,10 +488,10 @@ export default {
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" /> <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
</template> </template>
<template #filterclear="{ filterCallback }"> <template #filterclear="{ filterCallback }">
<Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button> <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
</template> </template>
<template #filterapply="{ filterCallback }"> <template #filterapply="{ filterCallback }">
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>

16
doc/datatable/paginator/PaginatorTemplateDoc.vue
View File

@ -16,10 +16,10 @@
tableStyle="min-width: 50rem" tableStyle="min-width: 50rem"
> >
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
<Column field="name" header="Name" style="width: 25%"></Column> <Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column> <Column field="country.name" header="Country" style="width: 25%"></Column>
@ -43,10 +43,10 @@ export default {
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"> currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
<Column field="name" header="Name" style="width: 25%"></Column> <Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column> <Column field="country.name" header="Country" style="width: 25%"></Column>
@ -60,10 +60,10 @@ export default {
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"> currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
<Column field="name" header="Name" style="width: 25%"></Column> <Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column> <Column field="country.name" header="Country" style="width: 25%"></Column>
@ -94,10 +94,10 @@ export default {
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"> currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
<Column field="name" header="Name" style="width: 25%"></Column> <Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column> <Column field="country.name" header="Country" style="width: 25%"></Column>

16
doc/datatable/samples/CustomersDoc.vue
View File

@ -6,7 +6,7 @@
<DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -94,7 +94,7 @@
</Column> </Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"> <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body> <template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" /> <Button type="button" icon="pi pi-cog" rounded />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -131,7 +131,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -219,7 +219,7 @@ export default {
</Column> </Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"> <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body> <template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" /> <Button type="button" icon="pi pi-cog" rounded />
</template> </template>
</Column> </Column>
</DataTable>`, </DataTable>`,
@ -230,7 +230,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -318,7 +318,7 @@ export default {
</Column> </Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"> <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body> <template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" /> <Button type="button" icon="pi pi-cog" rounded />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -420,7 +420,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -508,7 +508,7 @@ export default {
</Column> </Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"> <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body> <template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" /> <Button type="button" icon="pi pi-cog" rounded />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

76
doc/datatable/samples/ProductsDoc.vue
View File

@ -5,13 +5,13 @@
<div class="card"> <div class="card">
<Toolbar class="mb-4"> <Toolbar class="mb-4">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" /> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /> <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>
@ -63,8 +63,8 @@
</Column> </Column>
<Column :exportable="false" style="min-width: 12rem"> <Column :exportable="false" style="min-width: 12rem">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" /> <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" /> <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -132,8 +132,8 @@
</div> </div>
</div> </div>
<template #footer> <template #footer>
<Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog" /> <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" /> <Button label="Save" icon="pi pi-check" text @click="saveProduct" />
</template> </template>
</Dialog> </Dialog>
@ -146,8 +146,8 @@
> >
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false" /> <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /> <Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
</template> </template>
</Dialog> </Dialog>
@ -157,8 +157,8 @@
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false" /> <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /> <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
</template> </template>
</Dialog> </Dialog>
@ -189,12 +189,12 @@ export default {
basic: ` basic: `
<Toolbar class="mb-4"> <Toolbar class="mb-4">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" /> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /> <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id" <DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
@ -236,8 +236,8 @@ export default {
</Column> </Column>
<Column :exportable="false" style="min-width:8rem"> <Column :exportable="false" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" /> <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" /> <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
</template> </template>
</Column> </Column>
</DataTable>`, </DataTable>`,
@ -247,13 +247,13 @@ export default {
<div class="card"> <div class="card">
<Toolbar class="mb-4"> <Toolbar class="mb-4">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" /> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /> <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>
@ -297,8 +297,8 @@ export default {
</Column> </Column>
<Column :exportable="false" style="min-width:8rem"> <Column :exportable="false" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" /> <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" /> <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -366,8 +366,8 @@ export default {
</div> </div>
</div> </div>
<template #footer> <template #footer>
<Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/> <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" /> <Button label="Save" icon="pi pi-check" text @click="saveProduct" />
</template> </template>
</Dialog> </Dialog>
@ -377,8 +377,8 @@ export default {
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span> <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/> <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /> <Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
</template> </template>
</Dialog> </Dialog>
@ -388,8 +388,8 @@ export default {
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/> <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /> <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
</template> </template>
</Dialog> </Dialog>
</div> </div>
@ -535,13 +535,13 @@ export default {
<div class="card"> <div class="card">
<Toolbar class="mb-4"> <Toolbar class="mb-4">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" /> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /> <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>
@ -585,8 +585,8 @@ export default {
</Column> </Column>
<Column :exportable="false" style="min-width:8rem"> <Column :exportable="false" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" /> <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" /> <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -654,8 +654,8 @@ export default {
</div> </div>
</div> </div>
<template #footer> <template #footer>
<Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/> <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" /> <Button label="Save" icon="pi pi-check" text @click="saveProduct" />
</template> </template>
</Dialog> </Dialog>
@ -665,8 +665,8 @@ export default {
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span> <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/> <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /> <Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
</template> </template>
</Dialog> </Dialog>
@ -676,8 +676,8 @@ export default {
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/> <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /> <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
</template> </template>
</Dialog> </Dialog>
</div> </div>

8
doc/datatable/scroll/FrozenRowsDoc.vue
View File

@ -10,7 +10,7 @@
<Column field="status" header="Status"></Column> <Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem"> <Column style="flex: 0 0 4rem">
<template #body="{ data, frozenRow, index }"> <template #body="{ data, frozenRow, index }">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" /> <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -52,7 +52,7 @@ export default {
<Column field="status" header="Status"></Column> <Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem"> <Column style="flex: 0 0 4rem">
<template #body="{ data, frozenRow, index }"> <template #body="{ data, frozenRow, index }">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" /> <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
</template> </template>
</Column> </Column>
</DataTable>`, </DataTable>`,
@ -66,7 +66,7 @@ export default {
<Column field="status" header="Status"></Column> <Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem"> <Column style="flex: 0 0 4rem">
<template #body="{ data, frozenRow, index }"> <template #body="{ data, frozenRow, index }">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" /> <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -132,7 +132,7 @@ export default {
<Column field="status" header="Status"></Column> <Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem"> <Column style="flex: 0 0 4rem">
<template #body="{ data, frozenRow, index }"> <template #body="{ data, frozenRow, index }">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" /> <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

8
doc/dataview/BasicDoc.vue
View File

@ -24,7 +24,7 @@
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -63,7 +63,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -92,7 +92,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -155,7 +155,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>

16
doc/dataview/LayoutDoc.vue
View File

@ -31,7 +31,7 @@
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -55,7 +55,7 @@
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -100,7 +100,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -124,7 +124,7 @@ export default {
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -158,7 +158,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -182,7 +182,7 @@ export default {
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -251,7 +251,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -275,7 +275,7 @@ export default {
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>

8
doc/dataview/PaginationDoc.vue
View File

@ -22,7 +22,7 @@
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -61,7 +61,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -90,7 +90,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -153,7 +153,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>

8
doc/dataview/SortingDoc.vue
View File

@ -25,7 +25,7 @@
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -74,7 +74,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -106,7 +106,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -193,7 +193,7 @@ export default {
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>

8
doc/dialog/FooterDoc.vue
View File

@ -12,7 +12,7 @@
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
@ -35,7 +35,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog>`, </Dialog>`,
@ -49,7 +49,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
@ -75,7 +75,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>

72
doc/dialog/PositionDoc.vue
View File

@ -4,18 +4,18 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -24,7 +24,7 @@
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
@ -41,18 +41,18 @@ export default {
code: { code: {
basic: ` basic: `
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -61,7 +61,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog>`, </Dialog>`,
@ -69,18 +69,18 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -89,7 +89,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
@ -116,18 +116,18 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div> </div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -136,7 +136,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>

8
doc/divider/LoginDoc.vue
View File

@ -20,7 +20,7 @@
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider> <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div> </div>
<div class="w-full md:w-5 flex align-items-center justify-content-center py-5"> <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button> <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -50,7 +50,7 @@ export default {
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider> <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div> </div>
<div class="w-full md:w-5 flex align-items-center justify-content-center py-5"> <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button> <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
</div> </div>
</div>`, </div>`,
options: ` options: `
@ -73,7 +73,7 @@ export default {
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider> <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div> </div>
<div class="w-full md:w-5 flex align-items-center justify-content-center py-5"> <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button> <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -101,7 +101,7 @@ export default {
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider> <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div> </div>
<div class="w-full md:w-5 flex align-items-center justify-content-center py-5"> <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button> <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
</div> </div>
</div> </div>
</div> </div>

8
doc/dynamicdialog/BasicDoc.vue
View File

@ -150,7 +150,7 @@ const showProducts = () => {
<template> <template>
<div> <div>
<div class="flex justify-content-end mt-1 mb-3"> <div class="flex justify-content-end mt-1 mb-3">
<Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" /> <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
</div> </div>
<DataTable :value="products"> <DataTable :value="products">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
@ -164,7 +164,7 @@ const showProducts = () => {
<Column field="quantity" header="Quantity"></Column> <Column field="quantity" header="Quantity"></Column>
<Column style="width:5rem"> <Column style="width:5rem">
<template #body="slotProps"> <template #body="slotProps">
<Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button> <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -244,7 +244,7 @@ export default {
<template> <template>
<div> <div>
<div class="flex justify-content-end mt-1 mb-3"> <div class="flex justify-content-end mt-1 mb-3">
<Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" /> <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
</div> </div>
<DataTable :value="products"> <DataTable :value="products">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
@ -258,7 +258,7 @@ export default {
<Column field="quantity" header="Quantity"></Column> <Column field="quantity" header="Quantity"></Column>
<Column style="width:5rem"> <Column style="width:5rem">
<template #body="slotProps"> <template #body="slotProps">
<Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button> <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

4
doc/dynamicdialog/demo/ProductListDemo.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="flex justify-content-end mt-1 mb-3"> <div class="flex justify-content-end mt-1 mb-3">
<Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" /> <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
</div> </div>
<DataTable :value="products"> <DataTable :value="products">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
@ -15,7 +15,7 @@
<Column field="quantity" header="Quantity"></Column> <Column field="quantity" header="Quantity"></Column>
<Column style="width: 5rem"> <Column style="width: 5rem">
<template #body="slotProps"> <template #body="slotProps">
<Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button> <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

40
doc/fileupload/TemplateDoc.vue
View File

@ -7,9 +7,9 @@
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }"> <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"> <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2"> <div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button> <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
<Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button> <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
<Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button> <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div> </div>
<ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"> <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]">
<span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span> <span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
@ -27,7 +27,7 @@
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Pending" severity="warning" /> <Badge value="Pending" severity="warning" />
<Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>
@ -42,7 +42,7 @@
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Completed" class="mt-3" severity="success" /> <Badge value="Completed" class="mt-3" severity="success" />
<Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>
@ -71,9 +71,9 @@ export default {
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }"> <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"> <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2"> <div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button> <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
<Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button> <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
<Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button> <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div> </div>
<ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]" <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
@ -91,7 +91,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Pending" severity="warning" /> <Badge value="Pending" severity="warning" />
<Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>
@ -106,7 +106,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Completed" class="mt-3" severity="success" /> <Badge value="Completed" class="mt-3" severity="success" />
<Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>
@ -126,9 +126,9 @@ export default {
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }"> <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"> <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2"> <div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button> <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
<Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button> <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
<Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button> <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div> </div>
<ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]" <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
@ -146,7 +146,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Pending" severity="warning" /> <Badge value="Pending" severity="warning" />
<Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>
@ -161,7 +161,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Completed" class="mt-3" severity="success" /> <Badge value="Completed" class="mt-3" severity="success" />
<Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>
@ -232,9 +232,9 @@ export default {
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }"> <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"> <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2"> <div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button> <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
<Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button> <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
<Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button> <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div> </div>
<ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]" <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
@ -252,7 +252,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Pending" severity="warning" /> <Badge value="Pending" severity="warning" />
<Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>
@ -267,7 +267,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
<Badge value="Completed" class="mt-3" severity="success" /> <Badge value="Completed" class="mt-3" severity="success" />
<Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" /> <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
</div> </div>
</div> </div>
</div> </div>

8
doc/galleria/ControlledDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex flex-column md:align-items-center"> <div class="card flex flex-column md:align-items-center">
<div class="mb-3 align-self-center"> <div class="mb-3 align-self-center">
<Button icon="pi pi-minus" @click="prev" /> <Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" /> <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div> </div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
@ -46,7 +46,7 @@ export default {
basic: ` basic: `
<div> <div>
<Button icon="pi pi-minus" @click="prev" /> <Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" /> <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div> </div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
@ -62,7 +62,7 @@ export default {
<div class="card flex flex-column md:align-items-center"> <div class="card flex flex-column md:align-items-center">
<div class="mb-3 align-self-center"> <div class="mb-3 align-self-center">
<Button icon="pi pi-minus" @click="prev" /> <Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" /> <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div> </div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
@ -118,7 +118,7 @@ export default {
<div class="card flex flex-column md:align-items-center"> <div class="card flex flex-column md:align-items-center">
<div class="mb-3 align-self-center"> <div class="mb-3 align-self-center">
<Button icon="pi pi-minus" @click="prev" /> <Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" /> <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div> </div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">

24
doc/inputgroup/ButtonDoc.vue
View File

@ -10,13 +10,13 @@
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </div>
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<Button icon="pi pi-check" class="p-button-success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -35,13 +35,13 @@ export default {
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </div>
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<Button icon="pi pi-check" class="p-button-success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</div>`, </div>`,
options: ` options: `
<template> <template>
@ -53,13 +53,13 @@ export default {
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </div>
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<Button icon="pi pi-check" class="p-button-success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</div> </div>
</div> </div>
</template>`, </template>`,
@ -73,13 +73,13 @@ export default {
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </div>
<div class="p-inputgroup flex-1"> <div class="p-inputgroup flex-1">
<Button icon="pi pi-check" class="p-button-success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</div> </div>
</div> </div>
</template>` </template>`

20
doc/message/DynamicDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<Button label="Clear" class="p-button-secondary ml-2" @click="clearMessages()" /> <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
<transition-group name="p-message" tag="div"> <transition-group name="p-message" tag="div">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message> <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
</transition-group> </transition-group>
@ -20,11 +20,19 @@ export default {
count: 0, count: 0,
code: { code: {
basic: ` basic: `
<Message>Message Content</Message>`, <Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
<transition-group name="p-message" tag="div">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
</transition-group>`,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<Message>Message Content</Message> <Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
<transition-group name="p-message" tag="div">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
</transition-group>
</div> </div>
</template> </template>
@ -54,7 +62,11 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<Message>Message Content</Message> <Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
<transition-group name="p-message" tag="div">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
</transition-group>
</div> </div>
</template> </template>

8
doc/tabmenu/ControlledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p> <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Button @click="active = 0" class="p-button-text mb-2" label="Activate 1st" /> <Button @click="active = 0" text outlined class="mb-2" label="Activate 1st" />
<TabMenu v-model:activeIndex="active" :model="items" /> <TabMenu v-model:activeIndex="active" :model="items" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -38,12 +38,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" text outlined label="Activate 1st" />
<TabMenu v-model:activeIndex="active" :model="items" />`, <TabMenu v-model:activeIndex="active" :model="items" />`,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" text outlined label="Activate 1st" />
<TabMenu v-model:activeIndex="active" :model="items" /> <TabMenu v-model:activeIndex="active" :model="items" />
</div> </div>
</template> </template>
@ -82,7 +82,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" text outlined label="Activate 1st" />
<TabMenu v-model:activeIndex="active" :model="items" /> <TabMenu v-model:activeIndex="active" :model="items" />
</div> </div>
</template> </template>

24
doc/tabview/ControlledDoc.vue
View File

@ -4,9 +4,9 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView ref="tabview2" v-model:activeIndex="active1">
@ -41,9 +41,9 @@ export default {
code: { code: {
basic: ` basic: `
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView ref="tabview2" v-model:activeIndex="active1">
@ -71,9 +71,9 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView ref="tabview2" v-model:activeIndex="active1">
@ -113,9 +113,9 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" /> <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" /> <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView ref="tabview2" v-model:activeIndex="active1">

8
doc/theming/PrimeFlexDoc.vue
View File

@ -10,8 +10,8 @@
</DocSectionText> </DocSectionText>
<div class="card flex flex-column md:flex-row md:justify-content-between row-gap-3"> <div class="card flex flex-column md:flex-row md:justify-content-between row-gap-3">
<Button type="button" label="Button 1"></Button> <Button type="button" label="Button 1"></Button>
<Button type="button" label="Button 2" class="p-button-secondary"></Button> <Button type="button" label="Button 2" severity="secondary"></Button>
<Button type="button" label="Button 3" class="p-button-help"></Button> <Button type="button" label="Button 3" severity="help"></Button>
</div> </div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template> </template>
@ -24,8 +24,8 @@ export default {
basic: ` basic: `
<div class="flex flex-column md:flex-row md:justify-content-between row-gap-3"> <div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
<Button type="button" label="Button 1"></Button> <Button type="button" label="Button 1"></Button>
<Button type="button" label="Button 2" class="p-button-secondary"></Button> <Button type="button" label="Button 2" severity="secondary"></Button>
<Button type="button" label="Button 3" class="p-button-help"></Button> <Button type="button" label="Button 3" severity="help"></Button>
</div>` </div>`
} }
}; };

8
doc/timeline/TemplateDoc.vue
View File

@ -23,7 +23,7 @@
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 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! neque quas!
</p> </p>
<Button label="Read more" class="p-button-text"></Button> <Button label="Read more" text></Button>
</template> </template>
</Card> </Card>
</template> </template>
@ -64,7 +64,7 @@ export default {
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 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! neque quas!
</p> </p>
<Button label="Read more" class="p-button-text"></Button> <Button label="Read more" text></Button>
</template> </template>
</Card> </Card>
</template> </template>
@ -92,7 +92,7 @@ export default {
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 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! neque quas!
</p> </p>
<Button label="Read more" class="p-button-text"></Button> <Button label="Read more" text></Button>
</template> </template>
</Card> </Card>
</template> </template>
@ -159,7 +159,7 @@ export default {
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 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! neque quas!
</p> </p>
<Button label="Read more" class="p-button-text"></Button> <Button label="Read more" text></Button>
</template> </template>
</Card> </Card>
</template> </template>

8
doc/toast/MultipleDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Multiple" class="p-button-warning" @click="showMultiple()" /> <Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" /> <Button label="Clear" @click="clear()" />
</div> </div>
</div> </div>
@ -19,7 +19,7 @@ export default {
basic: ` basic: `
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Multiple" class="p-button-warning" @click="showMultiple()" /> <Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" /> <Button label="Clear" @click="clear()" />
</div>`, </div>`,
options: ` options: `
@ -27,7 +27,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Multiple" class="p-button-warning" @click="showMultiple()" /> <Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" /> <Button label="Clear" @click="clear()" />
</div> </div>
</div> </div>
@ -52,7 +52,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Multiple" class="p-button-warning" @click="showMultiple()" /> <Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" /> <Button label="Clear" @click="clear()" />
</div> </div>
</div> </div>

16
doc/toast/PositionDoc.vue
View File

@ -5,8 +5,8 @@
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" /> <Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /> <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /> <Button label="Bottom Right" severity="success" @click="showBottomRight" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -21,8 +21,8 @@ export default {
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" /> <Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /> <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /> <Button label="Bottom Right" severity="success" @click="showBottomRight" />
</div>`, </div>`,
options: ` options: `
<template> <template>
@ -30,8 +30,8 @@ export default {
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" /> <Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /> <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /> <Button label="Bottom Right" severity="success" @click="showBottomRight" />
</div> </div>
</div> </div>
</template> </template>
@ -57,8 +57,8 @@ export default {
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" /> <Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /> <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /> <Button label="Bottom Right" severity="success" @click="showBottomRight" />
</div> </div>
</div> </div>
</template> </template>

32
doc/toast/SeverityDoc.vue
View File

@ -4,10 +4,10 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Success" class="p-button-success" @click="showSuccess" /> <Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" /> <Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" /> <Button label="Warn" severity="warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" /> <Button label="Error" severity="danger" @click="showError" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -21,20 +21,20 @@ export default {
basic: ` basic: `
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Success" class="p-button-success" @click="showSuccess" /> <Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" /> <Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" /> <Button label="Warn" severity="warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" /> <Button label="Error" severity="danger" @click="showError" />
</div>`, </div>`,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Success" class="p-button-success" @click="showSuccess" /> <Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" /> <Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" /> <Button label="Warn" severity="warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" /> <Button label="Error" severity="danger" @click="showError" />
</div> </div>
</div> </div>
</template> </template>
@ -62,10 +62,10 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Success" class="p-button-success" @click="showSuccess" /> <Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" /> <Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" /> <Button label="Warn" severity="warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" /> <Button label="Error" severity="danger" @click="showError" />
</div> </div>
</div> </div>
</template> </template>

16
doc/toast/TemplateDoc.vue
View File

@ -12,8 +12,8 @@
<p>{{ slotProps.message.detail }}</p> <p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button class="p-button-success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button class="p-button-secondary" label="No" @click="onReject()"></Button> <Button severity="secondary" label="No" @click="onReject()"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -38,8 +38,8 @@ export default {
<p>{{ slotProps.message.detail }}</p> <p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button class="p-button-success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button class="p-button-secondary" label="No" @click="onReject()"></Button> <Button severity="secondary" label="No" @click="onReject()"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -57,8 +57,8 @@ export default {
<p>{{ slotProps.message.detail }}</p> <p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button class="p-button-success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button class="p-button-secondary" label="No" @click="onReject()"></Button> <Button severity="secondary" label="No" @click="onReject()"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -88,8 +88,8 @@ export default {
<p>{{ slotProps.message.detail }}</p> <p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button class="p-button-success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button class="p-button-secondary" label="No" @click="onReject()"></Button> <Button severity="secondary" label="No" @click="onReject()"></Button>
</div> </div>
</div> </div>
</template> </template>

24
doc/toolbar/BasicDoc.vue
View File

@ -6,15 +6,15 @@
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template> </template>
<template #end> <template #end>
<Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</template> </template>
</Toolbar> </Toolbar>
</div> </div>
@ -54,15 +54,15 @@ export default {
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template> </template>
<template #end> <template #end>
<Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</template> </template>
</Toolbar>`, </Toolbar>`,
options: ` options: `
@ -71,15 +71,15 @@ export default {
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template> </template>
<template #end> <template #end>
<Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</template> </template>
</Toolbar> </Toolbar>
</div> </div>
@ -123,15 +123,15 @@ export default {
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template> </template>
<template #end> <template #end>
<Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" class="p-button-danger" /> <Button icon="pi pi-times" severity="danger" />
</template> </template>
</Toolbar> </Toolbar>
</div> </div>

24
doc/treetable/TemplateDoc.vue
View File

@ -13,14 +13,14 @@
<Column headerStyle="width: 10rem"> <Column headerStyle="width: 10rem">
<template #body> <template #body>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-search" class="p-button-rounded" /> <Button type="button" icon="pi pi-search" rounded />
<Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" /> <Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div> </div>
</template> </template>
</Column> </Column>
<template #footer> <template #footer>
<div class="flex justify-content-start"> <div class="flex justify-content-start">
<Button icon="pi pi-refresh" label="Reload" class="p-button-warning" /> <Button icon="pi pi-refresh" label="Reload" severity="warning" />
</div> </div>
</template> </template>
</TreeTable> </TreeTable>
@ -47,14 +47,14 @@ export default {
<Column headerStyle="width: 10rem"> <Column headerStyle="width: 10rem">
<template #body> <template #body>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-search" class="p-button-rounded" /> <Button type="button" icon="pi pi-search" rounded />
<Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" /> <Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div> </div>
</template> </template>
</Column> </Column>
<template #footer> <template #footer>
<div class="flex justify-content-start"> <div class="flex justify-content-start">
<Button icon="pi pi-refresh" label="Reload" class="p-button-warning" /> <Button icon="pi pi-refresh" label="Reload" severity="warning" />
</div> </div>
</template> </template>
</TreeTable>`, </TreeTable>`,
@ -71,14 +71,14 @@ export default {
<Column headerStyle="width: 10rem"> <Column headerStyle="width: 10rem">
<template #body> <template #body>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button" /> <Button type="button" icon="pi pi-search" rounded/>
<Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" /> <Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div> </div>
</template> </template>
</Column> </Column>
<template #footer> <template #footer>
<div class="flex justify-content-start"> <div class="flex justify-content-start">
<Button icon="pi pi-refresh" label="Reload" class="p-button-warning" /> <Button icon="pi pi-refresh" label="Reload" severity="warning" />
</div> </div>
</template> </template>
</TreeTable> </TreeTable>
@ -112,14 +112,14 @@ export default {
<Column headerStyle="width: 10rem"> <Column headerStyle="width: 10rem">
<template #body> <template #body>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button" /> <Button type="button" icon="pi pi-search" rounded/>
<Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" /> <Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div> </div>
</template> </template>
</Column> </Column>
<template #footer> <template #footer>
<div class="flex justify-content-start"> <div class="flex justify-content-start">
<Button icon="pi pi-refresh" label="Reload" class="p-button-warning" /> <Button icon="pi pi-refresh" label="Reload" severity="warning" />
</div> </div>
</template> </template>
</TreeTable> </TreeTable>

16
doc/treetable/paginator/PaginatorTemplateDoc.vue
View File

@ -15,13 +15,13 @@
currentPageReportTemplate="{first} to {last} of {totalRecords}" currentPageReportTemplate="{first} to {last} of {totalRecords}"
> >
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
</TreeTable> </TreeTable>
</div> </div>
@ -39,13 +39,13 @@ export default {
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"> currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
</TreeTable>`, </TreeTable>`,
options: ` options: `
@ -55,13 +55,13 @@ export default {
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"> currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
</TreeTable> </TreeTable>
</div> </div>
@ -111,13 +111,13 @@ export default {
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"> currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart> <template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /> <Button type="button" icon="pi pi-refresh" text />
</template> </template>
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
<template #paginatorend> <template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" /> <Button type="button" icon="pi pi-download" text />
</template> </template>
</TreeTable> </TreeTable>
</div> </div>

4
layouts/AppConfigurator.vue
View File

@ -4,10 +4,10 @@
<section class="mb-5"> <section class="mb-5">
<h3>Component Scale</h3> <h3>Component Scale</h3>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Button icon="pi pi-minus" @click="decrementScale" class="p-button-text p-button-rounded w-2rem h-2rem" :disabled="scale === scales[0]" /> <Button icon="pi pi-minus" @click="decrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[0]" />
<i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-600', { 'text-lg text-primary': s === scale }]" /> <i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-600', { 'text-lg text-primary': s === scale }]" />
<Button icon="pi pi-plus" @click="incrementScale" class="p-button-text p-button-rounded w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" /> <Button icon="pi pi-plus" @click="incrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" />
</div> </div>
</section> </section>

2
pages/landing/ComponentSection.vue
View File

@ -79,7 +79,7 @@
</div> </div>
<span class="font-medium text-xl ml-auto">$12.45</span> <span class="font-medium text-xl ml-auto">$12.45</span>
</div> </div>
<Button label="Add to Cart" icon="pi pi-shopping-cart" class="w-full p-button-outlined"></Button> <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
</div> </div>
<div class="box p-4 mb-5"> <div class="box p-4 mb-5">
<Tree :value="nodes" class="bg-transparent border-none p-0" /> <Tree :value="nodes" class="bg-transparent border-none p-0" />

2
pages/landing/DesignerSection.vue
View File

@ -104,7 +104,7 @@
<span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span> <span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span>
<div class="flex align-items-center"> <div class="flex align-items-center">
<Button type="button" label="Save" icon="pi pi-check" class="mr-1"></Button> <Button type="button" label="Save" icon="pi pi-check" class="mr-1"></Button>
<Button type="button" label="Clear" icon="pi pi-times" class="p-button-outlined ml-1"></Button> <Button type="button" label="Clear" icon="pi pi-times" outlined class="ml-1"></Button>
</div> </div>
</div> </div>
</div> </div>

2
pages/landing/ThemeSection.vue
View File

@ -78,7 +78,7 @@
</Column> </Column>
<Column headerStyle="min-width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible"> <Column headerStyle="min-width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body> <template #body>
<Button type="button" icon="pi pi-cog" class="p-button-text"></Button> <Button type="button" icon="pi pi-cog" text></Button>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

2
pages/steps/Confirmation.vue
View File

@ -43,7 +43,7 @@
<template v-slot:footer> <template v-slot:footer>
<div class="grid grid-nogutter justify-content-between"> <div class="grid grid-nogutter justify-content-between">
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" /> <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
<Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success" /> <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" severity="success" />
</div> </div>
</template> </template>
</Card> </Card>