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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/5161/head
mertsincan 2024-01-24 11:24:01 +00:00
parent 2015617c89 c7c77625bc
commit 2501fc91b7
41 changed files with 185 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/timeline/Timeline.spec.js
View File

@ -57,7 +57,7 @@ describe('customized timeline', () => {
`, `,
marker: ` marker: `
<template #marker="slotProps"> <template #marker="slotProps">
<span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}"> <span class="custom-marker" :style="{backgroundColor: slotProps.item.color}">
<i :class="slotProps.item.icon"></i> <i :class="slotProps.item.icon"></i>
</span> </span>
</template> </template>

8
doc/carousel/BasicDoc.vue
View File

@ -9,7 +9,7 @@
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div> </div>
</div> </div>
@ -64,7 +64,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -88,7 +88,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -168,7 +168,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>

8
doc/carousel/CircularDoc.vue
View File

@ -9,7 +9,7 @@
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div> </div>
</div> </div>
@ -64,7 +64,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -88,7 +88,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -168,7 +168,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>

8
doc/carousel/ResponsiveDoc.vue
View File

@ -12,7 +12,7 @@
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div> </div>
</div> </div>
@ -67,7 +67,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -171,7 +171,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>

8
doc/carousel/VerticalDoc.vue
View File

@ -9,7 +9,7 @@
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div> </div>
</div> </div>
@ -42,7 +42,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -66,7 +66,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>
@ -124,7 +124,7 @@ export default {
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3"> <div class="mb-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div> </div>
</div> </div>

8
doc/carousel/pt/PTDoc.vue
View File

@ -13,7 +13,7 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3"> <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3"> <div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -74,7 +74,7 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3"> <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3"> <div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -104,7 +104,7 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3"> <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3"> <div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -190,7 +190,7 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3"> <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3"> <div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>

10
doc/common/apidoc/index.json
View File

@ -23735,6 +23735,14 @@
"default": "", "default": "",
"description": "Used to pass attributes to the item group's DOM element." "description": "Used to pass attributes to the item group's DOM element."
}, },
{
"name": "itemGroupLabel",
"optional": true,
"readonly": false,
"type": "DropdownPassThroughOptionType<T>",
"default": "",
"description": "Used to pass attributes to the item group label's DOM element."
},
{ {
"name": "item", "name": "item",
"optional": true, "optional": true,
@ -24260,7 +24268,7 @@
"readonly": false, "readonly": false,
"type": "boolean", "type": "boolean",
"default": "false", "default": "false",
"description": "Highlights automatically the first item." "description": "Whether the selected option will be add highlight class."
}, },
{ {
"name": "showTick", "name": "showTick",

16
doc/contextmenu/TemplateDoc.vue
View File

@ -11,7 +11,7 @@
@contextmenu="onRightClick($event, product.id)" @contextmenu="onRightClick($event, product.id)"
> >
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ product.name }}</span> <span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -30,7 +30,7 @@
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</ContextMenu> </ContextMenu>
@ -87,7 +87,7 @@ export default {
@contextmenu="onRightClick($event, product.id)" @contextmenu="onRightClick($event, product.id)"
> >
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'/images/product/' + product.image" :alt="product.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ product.name }}</span> <span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -106,7 +106,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</ContextMenu> </ContextMenu>
@ -122,7 +122,7 @@ export default {
@contextmenu="onRightClick($event, product.id)" @contextmenu="onRightClick($event, product.id)"
> >
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ product.name }}</span> <span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -141,7 +141,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</ContextMenu> </ContextMenu>
@ -212,7 +212,7 @@ export default {
@contextmenu="onRightClick($event, product.id)" @contextmenu="onRightClick($event, product.id)"
> >
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ product.name }}</span> <span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -231,7 +231,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</ContextMenu> </ContextMenu>

8
doc/datatable/TemplateDoc.vue
View File

@ -14,7 +14,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" /> <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-6rem border-round" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price">
@ -59,7 +59,7 @@ export default {
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price">
@ -94,7 +94,7 @@ export default {
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price">
@ -166,7 +166,7 @@ export default {
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price">

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

@ -43,7 +43,7 @@
<Column field="name" header="Name" sortable style="min-width: 16rem"></Column> <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" /> <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable style="min-width: 8rem"> <Column field="price" header="Price" sortable style="min-width: 8rem">
@ -217,7 +217,7 @@ export default {
<Column field="name" header="Name" sortable style="min-width:16rem"></Column> <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable style="min-width:8rem"> <Column field="price" header="Price" sortable style="min-width:8rem">
@ -279,7 +279,7 @@ export default {
<Column field="name" header="Name" sortable style="min-width:16rem"></Column> <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable style="min-width:8rem"> <Column field="price" header="Price" sortable style="min-width:8rem">
@ -568,7 +568,7 @@ export default {
<Column field="name" header="Name" sortable style="min-width:16rem"></Column> <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable style="min-width:8rem"> <Column field="price" header="Price" sortable style="min-width:8rem">

8
doc/dataview/BasicDoc.vue
View File

@ -9,7 +9,7 @@
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -57,7 +57,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -96,7 +96,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -169,7 +169,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">

16
doc/dataview/LayoutDoc.vue
View File

@ -18,7 +18,7 @@
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -53,7 +53,7 @@
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column"> <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
<div class="surface-50 flex justify-content-center border-round p-3"> <div class="surface-50 flex justify-content-center border-round p-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img class="shadow-2 border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" /> <img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
</div> </div>
@ -109,7 +109,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -144,7 +144,7 @@ export default {
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column"> <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
<div class="surface-50 flex justify-content-center border-round p-3"> <div class="surface-50 flex justify-content-center border-round p-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img class="shadow-2 border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/> <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
</div> </div>
@ -190,7 +190,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -225,7 +225,7 @@ export default {
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column"> <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
<div class="surface-50 flex justify-content-center border-round p-3"> <div class="surface-50 flex justify-content-center border-round p-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img class="shadow-2 border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/> <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
</div> </div>
@ -306,7 +306,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -341,7 +341,7 @@ export default {
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column"> <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
<div class="surface-50 flex justify-content-center border-round p-3"> <div class="surface-50 flex justify-content-center border-round p-3">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img class="shadow-2 border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/> <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
</div> </div>

16
doc/dataview/LoadingDoc.vue
View File

@ -14,7 +14,7 @@
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
@ -43,7 +43,7 @@
<Skeleton class="w-3rem border-round h-1rem" /> <Skeleton class="w-3rem border-round h-1rem" />
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" /> <Skeleton class="w-9 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" /> <Skeleton class="w-6rem border-round h-1rem" />
</div> </div>
@ -81,7 +81,7 @@ export default {
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
@ -110,7 +110,7 @@ export default {
<Skeleton class="w-3rem border-round h-1rem" /> <Skeleton class="w-3rem border-round h-1rem" />
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" /> <Skeleton class="w-9 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" /> <Skeleton class="w-6rem border-round h-1rem" />
</div> </div>
@ -138,7 +138,7 @@ export default {
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
@ -167,7 +167,7 @@ export default {
<Skeleton class="w-3rem border-round h-1rem" /> <Skeleton class="w-3rem border-round h-1rem" />
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" /> <Skeleton class="w-9 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" /> <Skeleton class="w-6rem border-round h-1rem" />
</div> </div>
@ -230,7 +230,7 @@ export default {
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
@ -259,7 +259,7 @@ export default {
<Skeleton class="w-3rem border-round h-1rem" /> <Skeleton class="w-3rem border-round h-1rem" />
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" /> <Skeleton class="w-9 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" /> <Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" /> <Skeleton class="w-6rem border-round h-1rem" />
</div> </div>

8
doc/dataview/PaginationDoc.vue
View File

@ -9,7 +9,7 @@
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -57,7 +57,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -96,7 +96,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -169,7 +169,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">

8
doc/dataview/SortingDoc.vue
View File

@ -12,7 +12,7 @@
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -70,7 +70,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -112,7 +112,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@ -209,7 +209,7 @@ export default {
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-10rem relative">
<img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">

16
doc/dataview/pt/PTDoc.vue
View File

@ -24,7 +24,7 @@
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ item.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@ -59,7 +59,7 @@
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<img class="w-9 shadow-2 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="w-9 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<div class="text-2xl font-bold">{{ item.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating value="{product.rating}" readonly :cancel="false"></Rating> <Rating value="{product.rating}" readonly :cancel="false"></Rating>
</div> </div>
@ -109,7 +109,7 @@ export default {
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ item.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@ -144,7 +144,7 @@ export default {
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ item.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating value="{product.rating}" readonly :cancel="false"></Rating> <Rating value="{product.rating}" readonly :cancel="false"></Rating>
</div> </div>
@ -184,7 +184,7 @@ export default {
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ item.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@ -219,7 +219,7 @@ export default {
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ item.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating value="{product.rating}" readonly :cancel="false"></Rating> <Rating value="{product.rating}" readonly :cancel="false"></Rating>
</div> </div>
@ -294,7 +294,7 @@ export default {
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> <div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ item.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@ -329,7 +329,7 @@ export default {
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
<div class="flex flex-column align-items-center gap-3 py-5"> <div class="flex flex-column align-items-center gap-3 py-5">
<img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ item.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating value="{product.rating}" readonly :cancel="false"></Rating> <Rating value="{product.rating}" readonly :cancel="false"></Rating>
</div> </div>

4
doc/dynamicdialog/ExampleDoc.vue
View File

@ -152,7 +152,7 @@ const showProducts = () => {
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
</template> </template>
</Column> </Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -265,7 +265,7 @@ export default {
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
</template> </template>
</Column> </Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>

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

@ -8,7 +8,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
</template> </template>
</Column> </Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>

8
doc/fieldset/TemplateDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card"> <div class="card">
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center gap-2 px-2"> <div class="flex align-items-center pl-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</div> </div>
@ -27,7 +27,7 @@ export default {
basic: ` basic: `
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center gap-2 px-2"> <div class="flex align-items-center pl-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</div> </div>
@ -43,7 +43,7 @@ export default {
<div class="card"> <div class="card">
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center gap-2 px-2"> <div class="flex align-items-center pl-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</div> </div>
@ -64,7 +64,7 @@ export default {
<div class="card"> <div class="card">
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center gap-2 px-2"> <div class="flex align-items-center pl-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</div> </div>

16
doc/fileupload/TemplateDoc.vue
View File

@ -22,7 +22,7 @@
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
@ -37,7 +37,7 @@
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
@ -86,7 +86,7 @@ export default {
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
@ -101,7 +101,7 @@ export default {
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
@ -142,7 +142,7 @@ export default {
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
@ -157,7 +157,7 @@ export default {
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
@ -251,7 +251,7 @@ export default {
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>
@ -266,7 +266,7 @@ export default {
<div class="flex flex-wrap p-0 sm:p-5 gap-5"> <div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"> <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div> <div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" /> <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div> </div>
<span class="font-semibold">{{ file.name }}</span> <span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div> <div>{{ formatSize(file.size) }}</div>

8
doc/megamenu/TemplateDoc.vue
View File

@ -5,7 +5,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem"> <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
<path <path
@ -100,7 +100,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem"> <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
<path d="..." fill="var(--primary-color)" /> <path d="..." fill="var(--primary-color)" />
@ -135,7 +135,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem"> <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
<path <path
@ -235,7 +235,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem"> <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
<path <path

8
doc/menubar/TemplateDoc.vue
View File

@ -24,7 +24,7 @@
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>
@ -112,7 +112,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>
@ -145,7 +145,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>
@ -244,7 +244,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>

8
doc/orderlist/BasicDoc.vue
View File

@ -7,7 +7,7 @@
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -35,7 +35,7 @@ export default {
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -55,7 +55,7 @@ export default {
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -91,7 +91,7 @@ export default {
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">

8
doc/orderlist/pt/PTDoc.vue
View File

@ -14,7 +14,7 @@
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -52,7 +52,7 @@ export default {
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -81,7 +81,7 @@ export default {
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -126,7 +126,7 @@ export default {
<template #header> List of Products </template> <template #header> List of Products </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">

8
doc/organizationchart/TemplateDoc.vue
View File

@ -6,7 +6,7 @@
<OrganizationChart :value="data" collapsible> <OrganizationChart :value="data" collapsible>
<template #country="slotProps"> <template #country="slotProps">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem shadow-2 flag flag-${slotProps.node.data}`" /> <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem flag flag-${slotProps.node.data}`" />
<div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div> <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
</div> </div>
</template> </template>
@ -75,7 +75,7 @@ export default {
<OrganizationChart :value="data" collapsible> <OrganizationChart :value="data" collapsible>
<template #country="slotProps"> <template #country="slotProps">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" /> <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
<div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div> <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
</div> </div>
</template> </template>
@ -90,7 +90,7 @@ export default {
<OrganizationChart :value="data" collapsible> <OrganizationChart :value="data" collapsible>
<template #country="slotProps"> <template #country="slotProps">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" /> <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
<div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div> <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
</div> </div>
</template> </template>
@ -164,7 +164,7 @@ export default {
<OrganizationChart :value="data" collapsible> <OrganizationChart :value="data" collapsible>
<template #country="slotProps"> <template #country="slotProps">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" /> <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
<div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div> <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
</div> </div>
</template> </template>

8
doc/overlaypanel/DataTableDoc.vue
View File

@ -6,7 +6,7 @@
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center gap-3">
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card border-round">
<div class="relative"> <div class="relative">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-20rem" /> <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
</div> </div>
@ -46,7 +46,7 @@ export default {
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card border-round">
<div class="relative"> <div class="relative">
<img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" class="w-full sm:w-20rem" /> <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" class="w-full sm:w-20rem" />
</div> </div>
@ -79,7 +79,7 @@ export default {
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card border-round">
<div class="relative"> <div class="relative">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
</div> </div>
@ -141,7 +141,7 @@ export default {
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card border-round">
<div class="relative"> <div class="relative">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
</div> </div>

8
doc/paginator/TemplateDoc.vue
View File

@ -20,7 +20,7 @@
<Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" /> <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
<div class="p-3 text-center"> <div class="p-3 text-center">
<img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" /> <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="border-round w-full sm:w-30rem" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -36,7 +36,7 @@ export default {
<Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" /> <Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
<div class="p-3 text-center"> <div class="p-3 text-center">
<img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" /> <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
</div> </div>
`, `,
options: ` options: `
@ -45,7 +45,7 @@ export default {
<Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" /> <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
<div class="p-3 text-center"> <div class="p-3 text-center">
<img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" /> <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
</div> </div>
</div> </div>
</template> </template>
@ -66,7 +66,7 @@ export default {
<Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" /> <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
<div class="p-3 text-center"> <div class="p-3 text-center">
<img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" /> <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
</div> </div>
</div> </div>
</template> </template>

8
doc/picklist/BasicDoc.vue
View File

@ -8,7 +8,7 @@
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -38,7 +38,7 @@ export default {
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -59,7 +59,7 @@ export default {
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -96,7 +96,7 @@ export default {
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">

8
doc/picklist/pt/PTDoc.vue
View File

@ -19,7 +19,7 @@
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -62,7 +62,7 @@ export default {
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -96,7 +96,7 @@ export default {
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
@ -146,7 +146,7 @@ export default {
<template #targetheader> Selected </template> <template #targetheader> Selected </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ slotProps.item.name }}</span> <span class="font-bold">{{ slotProps.item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">

24
doc/ripple/CustomDoc.vue
View File

@ -9,7 +9,7 @@
root: { style: 'background: rgba(75, 175, 80, 0.3)' } root: { style: 'background: rgba(75, 175, 80, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Green Green
</div> </div>
@ -19,7 +19,7 @@
root: { style: 'background: rgba(255, 193, 6, 0.3)' } root: { style: 'background: rgba(255, 193, 6, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Orange Orange
</div> </div>
@ -29,7 +29,7 @@
root: { style: 'background: rgba(156, 39, 176, 0.3)' } root: { style: 'background: rgba(156, 39, 176, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Purple Purple
</div> </div>
@ -49,7 +49,7 @@ export default {
root: { style: 'background: rgba(75, 175, 80, 0.3)' } root: { style: 'background: rgba(75, 175, 80, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Green Green
</div> </div>
@ -59,7 +59,7 @@ export default {
root: { style: 'background: rgba(255, 193, 6, 0.3)' } root: { style: 'background: rgba(255, 193, 6, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Orange Orange
</div> </div>
@ -69,7 +69,7 @@ export default {
root: { style: 'background: rgba(156, 39, 176, 0.3)' } root: { style: 'background: rgba(156, 39, 176, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Purple Purple
</div> </div>
@ -83,7 +83,7 @@ export default {
root: { style: 'background: rgba(75, 175, 80, 0.3)' } root: { style: 'background: rgba(75, 175, 80, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Green Green
</div> </div>
@ -93,7 +93,7 @@ export default {
root: { style: 'background: rgba(255, 193, 6, 0.3)' } root: { style: 'background: rgba(255, 193, 6, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Orange Orange
</div> </div>
@ -103,7 +103,7 @@ export default {
root: { style: 'background: rgba(156, 39, 176, 0.3)' } root: { style: 'background: rgba(156, 39, 176, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Purple Purple
</div> </div>
@ -129,7 +129,7 @@ export default {
root: { style: 'background: rgba(75, 175, 80, 0.3)' } root: { style: 'background: rgba(75, 175, 80, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Green Green
</div> </div>
@ -139,7 +139,7 @@ export default {
root: { style: 'background: rgba(255, 193, 6, 0.3)' } root: { style: 'background: rgba(255, 193, 6, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Orange Orange
</div> </div>
@ -149,7 +149,7 @@ export default {
root: { style: 'background: rgba(156, 39, 176, 0.3)' } root: { style: 'background: rgba(156, 39, 176, 0.3)' }
} }
}" }"
class="p-ripple box shadow-2" class="p-ripple box"
> >
Purple Purple
</div> </div>

8
doc/ripple/DefaultDoc.vue
View File

@ -3,7 +3,7 @@
<p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p> <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center align-items-center"> <div class="card flex justify-content-center align-items-center">
<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div> <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,12 +14,12 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div> <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
`, `,
options: ` options: `
<template> <template>
<div class="card card-container flex justify-content-center align-items-center"> <div class="card card-container flex justify-content-center align-items-center">
<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div> <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
</div> </div>
</template> </template>
@ -29,7 +29,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card card-container flex justify-content-center align-items-center"> <div class="card card-container flex justify-content-center align-items-center">
<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div> <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
</div> </div>
</template> </template>

8
doc/ripple/pt/PTDoc.vue
View File

@ -7,7 +7,7 @@
root: 'bg-yellow-400' root: 'bg-yellow-400'
} }
}" }"
class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold" class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
> >
Default Default
</div> </div>
@ -27,7 +27,7 @@ export default {
root: 'bg-yellow-400' root: 'bg-yellow-400'
} }
}" }"
class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold" class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
> >
Default Default
</div> </div>
@ -41,7 +41,7 @@ export default {
root: 'bg-yellow-400' root: 'bg-yellow-400'
} }
}" }"
class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold" class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
> >
Default Default
</div> </div>
@ -60,7 +60,7 @@ export default {
root: 'bg-yellow-400' root: 'bg-yellow-400'
} }
}" }"
class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold" class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
> >
Default Default
</div> </div>

8
doc/styleclass/AnimationDoc.vue
View File

@ -11,7 +11,7 @@
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
</div> </div>
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -26,7 +26,7 @@ export default {
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" /> <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div> </div>
`, `,
options: ` options: `
@ -37,7 +37,7 @@ export default {
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
</div> </div>
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div> </div>
</div> </div>
</template> </template>
@ -97,7 +97,7 @@ export default {
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
</div> </div>
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div> </div>
</div> </div>
</template> </template>

28
doc/tag/TemplateDoc.vue
View File

@ -3,11 +3,10 @@
<p>Children of the component are passed as the content for templating.</p> <p>Children of the component are passed as the content for templating.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italy</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
</div> </div>
@ -20,22 +19,20 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italia</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italia</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
</div> </div>
@ -47,11 +44,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italia</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
</div> </div>

2
doc/textarea/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>A model can be bound using the standard <i>v-model</i> directive.</p> <p>A model can be bound using the standard <i>v-model</i> directive.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Textarea v-model="value" rows="5" cols="30" /> <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>

2
doc/textarea/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Textarea v-model="value" rows="5" cols="30" disabled /> <Textarea v-model="value" rows="5" cols="30" disabled style="resize: none" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>

2
doc/textarea/FloatLabelDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <span class="p-float-label">
<Textarea v-model="value" rows="5" cols="30" /> <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
<label>Username</label> <label>Username</label>
</span> </span>
</div> </div>

2
doc/textarea/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Textarea v-model="value" rows="5" cols="30" class="p-invalid" /> <Textarea v-model="value" rows="5" cols="30" class="p-invalid" style="resize: none" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>

8
doc/tieredmenu/TemplateDoc.vue
View File

@ -10,7 +10,7 @@
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</TieredMenu> </TieredMenu>
@ -110,7 +110,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</TieredMenu> </TieredMenu>
@ -125,7 +125,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</TieredMenu> </TieredMenu>
@ -230,7 +230,7 @@ export default {
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i> <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
</a> </a>
</template> </template>
</TieredMenu> </TieredMenu>

8
doc/toast/HeadlessDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
@ -38,7 +38,7 @@ export default {
basic: ` basic: `
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
@ -62,7 +62,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
@ -129,7 +129,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>

8
doc/toolbar/CustomDoc.vue
View File

@ -3,7 +3,7 @@
<p>A customized toolbar with navigation bar like functionality.</p> <p>A customized toolbar with navigation bar like functionality.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))"> <Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
@ -42,7 +42,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))"> <Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="#ffffff" /> <path d="..." fill="#ffffff" />
@ -69,7 +69,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))"> <Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
@ -107,7 +107,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))"> <Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path