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

8
doc/badge/ButtonDoc.vue
View File

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

8
doc/button/BadgesDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<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>
<DocSectionCode :code="code" />
</template>
@ -16,12 +16,12 @@ export default {
code: {
basic: `
<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: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<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>
</template>
@ -31,7 +31,7 @@ export default {
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<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>
</template>

8
doc/card/AdvancedDoc.vue
View File

@ -17,7 +17,7 @@
</template>
<template #footer>
<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>
</Card>
</div>
@ -44,7 +44,7 @@ export default {
</template>
<template #footer>
<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>
</Card>`,
options: `
@ -64,7 +64,7 @@ export default {
</template>
<template #footer>
<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>
</Card>
</div>
@ -89,7 +89,7 @@ export default {
</template>
<template #footer>
<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>
</Card>
</div>

20
doc/carousel/BasicDoc.vue
View File

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

24
doc/carousel/CircularDoc.vue
View File

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

24
doc/carousel/NumScrollDoc.vue
View File

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

24
doc/carousel/ResponsiveDoc.vue
View File

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

24
doc/carousel/VerticalDoc.vue
View File

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

64
doc/confirmdialog/PositionDoc.vue
View File

@ -5,18 +5,18 @@
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card">
<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('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></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" severity="help" style="min-width: 10rem"></Button>
</div>
<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('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></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" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div>
<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('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></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" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div>
</div>
<DocSectionCode :code="code" />
@ -30,18 +30,18 @@ export default {
basic: `
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<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('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></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" severity="help" style="min-width: 10rem"></Button>
</div>
<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('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></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" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div>
<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('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></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" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div>`,
options: `
<template>
@ -49,18 +49,18 @@ export default {
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card">
<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('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></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" severity="help" style="min-width: 10rem"></Button>
</div>
<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('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></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" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div>
<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('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></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" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div>
</div>
</template>
@ -92,18 +92,18 @@ export default {
<ConfirmDialog group="positionDialog"></ConfirmDialog>
<div class="card">
<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('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></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" severity="help" style="min-width: 10rem"></Button>
</div>
<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('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></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" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
</div>
<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('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></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" severity="success" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
</div>
</div>
</template>

8
doc/confirmpopup/BasicDoc.vue
View File

@ -5,7 +5,7 @@
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
<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>
<DocSectionCode :code="code" />
</template>
@ -19,7 +19,7 @@ export default {
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
<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>`,
options: `
<template>
@ -27,7 +27,7 @@ export default {
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
<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>
</template>
@ -70,7 +70,7 @@ export default {
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
<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>
</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">
<template #header>
<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 class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
</template>
<Column expander style="width: 5rem" />
@ -84,8 +84,8 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header>
<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 class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
</template>
<Column expander style="width: 5rem" />
@ -144,8 +144,8 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header>
<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 class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
</template>
<Column expander style="width: 5rem" />
@ -273,8 +273,8 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header>
<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 class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
</template>
<Column expander style="width: 5rem" />

8
doc/datatable/TemplateDoc.vue
View File

@ -7,7 +7,7 @@
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<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>
</template>
<Column field="name" header="Name"></Column>
@ -51,7 +51,7 @@ export default {
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<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>
</template>
<Column field="name" header="Name"></Column>
@ -85,7 +85,7 @@ export default {
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<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>
</template>
<Column field="name" header="Name"></Column>
@ -156,7 +156,7 @@ export default {
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<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>
</template>
<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']">
<template #header>
<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">
<i class="pi pi-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" />
</template>
<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 #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 #filterfooter>
<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']">
<template #header>
<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">
<i class="pi pi-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" />
</template>
<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 #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 #filterfooter>
<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']">
<template #header>
<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">
<i class="pi pi-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" />
</template>
<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 #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 #filterfooter>
<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']">
<template #header>
<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">
<i class="pi pi-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" />
</template>
<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 #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 #filterfooter>
<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"
>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" />
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" 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"
currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" />
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" 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"
currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" />
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" 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"
currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" class="p-button-text" />
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" 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']">
<template #header>
<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">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -94,7 +94,7 @@
</Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" />
<Button type="button" icon="pi pi-cog" rounded />
</template>
</Column>
</DataTable>
@ -131,7 +131,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<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">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -219,7 +219,7 @@ export default {
</Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" />
<Button type="button" icon="pi pi-cog" rounded />
</template>
</Column>
</DataTable>`,
@ -230,7 +230,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<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">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -318,7 +318,7 @@ export default {
</Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" />
<Button type="button" icon="pi pi-cog" rounded />
</template>
</Column>
</DataTable>
@ -420,7 +420,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<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">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -508,7 +508,7 @@ export default {
</Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body>
<Button type="button" icon="pi pi-cog" class="p-button-rounded" />
<Button type="button" icon="pi pi-cog" rounded />
</template>
</Column>
</DataTable>

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

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

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

@ -10,7 +10,7 @@
<Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem">
<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>
</Column>
</DataTable>
@ -52,7 +52,7 @@ export default {
<Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem">
<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>
</Column>
</DataTable>`,
@ -66,7 +66,7 @@ export default {
<Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem">
<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>
</Column>
</DataTable>
@ -132,7 +132,7 @@ export default {
<Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem">
<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>
</Column>
</DataTable>

8
doc/dataview/BasicDoc.vue
View File

@ -24,7 +24,7 @@
</div>
<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>
<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>
@ -63,7 +63,7 @@ export default {
</div>
<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>
<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>
@ -92,7 +92,7 @@ export default {
</div>
<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>
<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>
@ -155,7 +155,7 @@ export default {
</div>
<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>
<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>

16
doc/dataview/LayoutDoc.vue
View File

@ -31,7 +31,7 @@
</div>
<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>
<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>
@ -55,7 +55,7 @@
</div>
<div class="flex align-items-center justify-content-between">
<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>
@ -100,7 +100,7 @@ export default {
</div>
<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>
<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>
@ -124,7 +124,7 @@ export default {
</div>
<div class="flex align-items-center justify-content-between">
<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>
@ -158,7 +158,7 @@ export default {
</div>
<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>
<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>
@ -182,7 +182,7 @@ export default {
</div>
<div class="flex align-items-center justify-content-between">
<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>
@ -251,7 +251,7 @@ export default {
</div>
<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>
<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>
@ -275,7 +275,7 @@ export default {
</div>
<div class="flex align-items-center justify-content-between">
<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>

8
doc/dataview/PaginationDoc.vue
View File

@ -22,7 +22,7 @@
</div>
<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>
<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>
@ -61,7 +61,7 @@ export default {
</div>
<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>
<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>
@ -90,7 +90,7 @@ export default {
</div>
<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>
<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>
@ -153,7 +153,7 @@ export default {
</div>
<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>
<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>

8
doc/dataview/SortingDoc.vue
View File

@ -25,7 +25,7 @@
</div>
<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>
<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>
@ -74,7 +74,7 @@ export default {
</div>
<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>
<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>
@ -106,7 +106,7 @@ export default {
</div>
<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>
<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>
@ -193,7 +193,7 @@ export default {
</div>
<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>
<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>

8
doc/dialog/FooterDoc.vue
View File

@ -12,7 +12,7 @@
</p>
<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 />
</template>
</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.
</p>
<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 />
</template>
</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.
</p>
<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 />
</template>
</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.
</p>
<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 />
</template>
</Dialog>

72
doc/dialog/PositionDoc.vue
View File

@ -4,18 +4,18 @@
</DocSectionText>
<div class="card">
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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')" severity="help" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-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="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')" severity="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 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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-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="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')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<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.
</p>
<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 />
</template>
</Dialog>
@ -41,18 +41,18 @@ export default {
code: {
basic: `
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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')" severity="help" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-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="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')" severity="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 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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-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="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')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<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.
</p>
<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 />
</template>
</Dialog>`,
@ -69,18 +69,18 @@ export default {
<template>
<div class="card">
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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')" severity="help" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-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="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')" severity="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 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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-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="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')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<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.
</p>
<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 />
</template>
</Dialog>
@ -116,18 +116,18 @@ export default {
<template>
<div class="card">
<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="Right" icon="pi pi-arrow-left" @click="openPosition('right')" 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')" severity="help" style="min-width: 10rem" />
</div>
<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="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-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="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')" severity="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 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="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-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="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')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<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.
</p>
<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 />
</template>
</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>
</div>
<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>
@ -50,7 +50,7 @@ export default {
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div>
<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>`,
options: `
@ -73,7 +73,7 @@ export default {
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div>
<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>
@ -101,7 +101,7 @@ export default {
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div>
<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>

8
doc/dynamicdialog/BasicDoc.vue
View File

@ -150,7 +150,7 @@ const showProducts = () => {
<template>
<div>
<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>
<DataTable :value="products">
<Column field="code" header="Code"></Column>
@ -164,7 +164,7 @@ const showProducts = () => {
<Column field="quantity" header="Quantity"></Column>
<Column style="width:5rem">
<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>
</Column>
</DataTable>
@ -244,7 +244,7 @@ export default {
<template>
<div>
<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>
<DataTable :value="products">
<Column field="code" header="Code"></Column>
@ -258,7 +258,7 @@ export default {
<Column field="quantity" header="Quantity"></Column>
<Column style="width:5rem">
<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>
</Column>
</DataTable>

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

@ -1,7 +1,7 @@
<template>
<div>
<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>
<DataTable :value="products">
<Column field="code" header="Code"></Column>
@ -15,7 +15,7 @@
<Column field="quantity" header="Quantity"></Column>
<Column style="width: 5rem">
<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>
</Column>
</DataTable>

40
doc/fileupload/TemplateDoc.vue
View File

@ -7,9 +7,9 @@
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></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="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
<Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></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" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div>
<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>
@ -27,7 +27,7 @@
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>
@ -42,7 +42,7 @@
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>
@ -71,9 +71,9 @@ export default {
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></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="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
<Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></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" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div>
<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
@ -91,7 +91,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>
@ -106,7 +106,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>
@ -126,9 +126,9 @@ export default {
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></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="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
<Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></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" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div>
<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
@ -146,7 +146,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>
@ -161,7 +161,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>
@ -232,9 +232,9 @@ export default {
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></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="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
<Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></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" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div>
<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
@ -252,7 +252,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>
@ -267,7 +267,7 @@ export default {
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<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>

8
doc/galleria/ControlledDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex flex-column md:align-items-center">
<div class="mb-3 align-self-center">
<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>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
@ -46,7 +46,7 @@ export default {
basic: `
<div>
<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>
<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="mb-3 align-self-center">
<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>
<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="mb-3 align-self-center">
<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>
<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">
<InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" />
<Button icon="pi pi-search" severity="warning" />
</div>
<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" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-times" severity="danger" />
</div>
</div>
<DocSectionCode :code="code" />
@ -35,13 +35,13 @@ export default {
<div class="p-inputgroup flex-1">
<InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" />
<Button icon="pi pi-search" severity="warning" />
</div>
<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" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-times" severity="danger" />
</div>`,
options: `
<template>
@ -53,13 +53,13 @@ export default {
<div class="p-inputgroup flex-1">
<InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" />
<Button icon="pi pi-search" severity="warning" />
</div>
<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" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-times" severity="danger" />
</div>
</div>
</template>`,
@ -73,13 +73,13 @@ export default {
<div class="p-inputgroup flex-1">
<InputText placeholder="Keyword" />
<Button icon="pi pi-search" class="p-button-warning" />
<Button icon="pi pi-search" severity="warning" />
</div>
<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" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-times" severity="danger" />
</div>
</div>
</template>`

20
doc/message/DynamicDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card">
<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">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
</transition-group>
@ -20,11 +20,19 @@ export default {
count: 0,
code: {
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: `
<template>
<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>
</template>
@ -54,7 +62,11 @@ export default {
composition: `
<template>
<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>
</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>
</DocSectionText>
<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" />
</div>
<DocSectionCode :code="code" />
@ -38,12 +38,12 @@ export default {
],
code: {
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" />`,
options: `
<template>
<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" />
</div>
</template>
@ -82,7 +82,7 @@ export default {
composition: `
<template>
<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" />
</div>
</template>

24
doc/tabview/ControlledDoc.vue
View File

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

8
doc/theming/PrimeFlexDoc.vue
View File

@ -10,8 +10,8 @@
</DocSectionText>
<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 2" class="p-button-secondary"></Button>
<Button type="button" label="Button 3" class="p-button-help"></Button>
<Button type="button" label="Button 2" severity="secondary"></Button>
<Button type="button" label="Button 3" severity="help"></Button>
</div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
@ -24,8 +24,8 @@ export default {
basic: `
<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 2" class="p-button-secondary"></Button>
<Button type="button" label="Button 3" class="p-button-help"></Button>
<Button type="button" label="Button 2" severity="secondary"></Button>
<Button type="button" label="Button 3" severity="help"></Button>
</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
neque quas!
</p>
<Button label="Read more" class="p-button-text"></Button>
<Button label="Read more" text></Button>
</template>
</Card>
</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
neque quas!
</p>
<Button label="Read more" class="p-button-text"></Button>
<Button label="Read more" text></Button>
</template>
</Card>
</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
neque quas!
</p>
<Button label="Read more" class="p-button-text"></Button>
<Button label="Read more" text></Button>
</template>
</Card>
</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
neque quas!
</p>
<Button label="Read more" class="p-button-text"></Button>
<Button label="Read more" text></Button>
</template>
</Card>
</template>

8
doc/toast/MultipleDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card flex justify-content-center">
<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()" />
</div>
</div>
@ -19,7 +19,7 @@ export default {
basic: `
<Toast />
<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()" />
</div>`,
options: `
@ -27,7 +27,7 @@ export default {
<div class="card flex justify-content-center">
<Toast />
<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()" />
</div>
</div>
@ -52,7 +52,7 @@ export default {
<div class="card flex justify-content-center">
<Toast />
<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()" />
</div>
</div>

16
doc/toast/PositionDoc.vue
View File

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

32
doc/toast/SeverityDoc.vue
View File

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

16
doc/toast/TemplateDoc.vue
View File

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

24
doc/toolbar/BasicDoc.vue
View File

@ -6,15 +6,15 @@
<Toolbar>
<template #start>
<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" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template>
<template #end>
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
</template>
</Toolbar>
</div>
@ -54,15 +54,15 @@ export default {
<Toolbar>
<template #start>
<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" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template>
<template #end>
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
</template>
</Toolbar>`,
options: `
@ -71,15 +71,15 @@ export default {
<Toolbar>
<template #start>
<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" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template>
<template #end>
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
</template>
</Toolbar>
</div>
@ -123,15 +123,15 @@ export default {
<Toolbar>
<template #start>
<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" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template>
<template #end>
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" />
<Button icon="pi pi-times" class="p-button-danger" />
<Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
</template>
</Toolbar>
</div>

24
doc/treetable/TemplateDoc.vue
View File

@ -13,14 +13,14 @@
<Column headerStyle="width: 10rem">
<template #body>
<div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-search" class="p-button-rounded" />
<Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" />
<Button type="button" icon="pi pi-search" rounded />
<Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div>
</template>
</Column>
<template #footer>
<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>
</template>
</TreeTable>
@ -47,14 +47,14 @@ export default {
<Column headerStyle="width: 10rem">
<template #body>
<div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-search" class="p-button-rounded" />
<Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" />
<Button type="button" icon="pi pi-search" rounded />
<Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div>
</template>
</Column>
<template #footer>
<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>
</template>
</TreeTable>`,
@ -71,14 +71,14 @@ export default {
<Column headerStyle="width: 10rem">
<template #body>
<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-pencil" class="p-button-rounded p-button-success" />
<Button type="button" icon="pi pi-search" rounded/>
<Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div>
</template>
</Column>
<template #footer>
<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>
</template>
</TreeTable>
@ -112,14 +112,14 @@ export default {
<Column headerStyle="width: 10rem">
<template #body>
<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-pencil" class="p-button-rounded p-button-success" />
<Button type="button" icon="pi pi-search" rounded/>
<Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div>
</template>
</Column>
<template #footer>
<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>
</template>
</TreeTable>

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

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

4
layouts/AppConfigurator.vue
View File

@ -4,10 +4,10 @@
<section class="mb-5">
<h3>Component Scale</h3>
<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 }]" />
<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>
</section>

2
pages/landing/ComponentSection.vue
View File

@ -79,7 +79,7 @@
</div>
<span class="font-medium text-xl ml-auto">$12.45</span>
</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 class="box p-4 mb-5">
<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>
<div class="flex align-items-center">
<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>

2
pages/landing/ThemeSection.vue
View File

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

2
pages/steps/Confirmation.vue
View File

@ -43,7 +43,7 @@
<template v-slot:footer>
<div class="grid grid-nogutter justify-content-between">
<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>
</template>
</Card>