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

Fixed #4818 - Remove primeflex dependency from DataView

pull/4823/head
mertsincan 2023-11-15 09:51:35 +00:00
parent 3231777755
commit 2026bb75e4
12 changed files with 690 additions and 661 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/lib/dataview/DataView.d.ts vendored
View File

@ -81,14 +81,6 @@ export interface DataViewPassThroughOptions {
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
content?: DataViewPassThroughOptionType; content?: DataViewPassThroughOptionType;
/**
* Used to pass attributes to the grid's DOM element.
*/
grid?: DataViewPassThroughOptionType;
/**
* Used to pass attributes to the column's DOM element.
*/
column?: DataViewPassThroughOptionType;
/** /**
* Used to pass attributes to the empty message's DOM element. * Used to pass attributes to the empty message's DOM element.
*/ */
@ -253,8 +245,14 @@ export interface DataViewSlots {
footer(): VNode[]; footer(): VNode[];
/** /**
* Custom empty template. * Custom empty template.
* @param {Object} scope - empty slot's params.
*/ */
empty(): VNode[]; empty(scope: {
/**
* Layout of the items.
*/
layout?: string | undefined;
}): VNode[];
/** /**
* Custom paginator start template. * Custom paginator start template.
*/ */
@ -271,11 +269,7 @@ export interface DataViewSlots {
/** /**
* Value of the component * Value of the component
*/ */
data: any; items: any;
/**
* Index of the grid
*/
index: number;
}): VNode[]; }): VNode[];
/** /**
* Custom list template. * Custom list template.
@ -285,11 +279,7 @@ export interface DataViewSlots {
/** /**
* Value of the component * Value of the component
*/ */
data: any; items: any;
/**
* Index of the grid
*/
index: number;
}): VNode[]; }): VNode[];
} }

19
components/lib/dataview/DataView.vue
View File

@ -26,16 +26,14 @@
</template> </template>
</DVPaginator> </DVPaginator>
<div :class="cx('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<div :class="cx('grid')" v-bind="ptm('grid')"> <template v-if="!empty">
<template v-for="(item, index) of items" :key="getKey(item, index)"> <slot v-if="$slots.list && layout === 'list'" name="list" :items="items"></slot>
<slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot> <slot v-if="$slots.grid && layout === 'grid'" name="grid" :items="items"></slot>
<slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
</template> </template>
<div v-if="empty" :class="cx('column')" v-bind="ptm('column')"> <div v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
<div :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')"> <slot name="empty" :layout="layout">
<slot name="empty"></slot> {{ emptyMessageText }}
</div> </slot>
</div>
</div> </div>
</div> </div>
<DVPaginator <DVPaginator
@ -137,6 +135,9 @@ export default {
empty() { empty() {
return !this.value || this.value.length === 0; return !this.value || this.value.length === 0;
}, },
emptyMessageText() {
return this.$primevue.config?.locale?.emptyMessage || '';
},
paginatorTop() { paginatorTop() {
return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both'); return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
}, },

2
components/lib/dataview/style/DataViewStyle.js
View File

@ -11,8 +11,6 @@ const classes = {
header: 'p-dataview-header', header: 'p-dataview-header',
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''), paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
content: 'p-dataview-content', content: 'p-dataview-content',
grid: 'p-grid p-nogutter grid grid-nogutter',
column: 'p-col col',
emptyMessage: 'p-dataview-emptymessage', emptyMessage: 'p-dataview-emptymessage',
footer: 'p-dataview-footer' footer: 'p-dataview-footer'
}; };

76
doc/dataview/BasicDoc.vue
View File

@ -1,30 +1,30 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>DataView requires a <i>value</i> to display along with a <i>list</i> slot that receives an object in the collection to return content.</p>
DataView requires a <i>value</i> to display along with a <i>list</i> slot that receives an object in the collection to return content. The root element should have the PrimeFlex Grid classes e.g. col-12 to define how items are displayed.
</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/${slotProps.data.image}`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -46,24 +46,26 @@ export default {
basic: ` basic: `
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -76,24 +78,26 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -140,24 +144,26 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>

146
doc/dataview/LayoutDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The helper <i>DataViewLayoutOptions</i> component can be used to switch between the modes however this component is optional and you may DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The helper <i>DataViewLayoutOptions</i> component can be used to switch between the modes however this component is optional and you may
use your own UI to switch modes as well. As in <i>list</i> layout, the <i>grid</i> layout also requires PrimeFlex Grid classes to define how the grid is displayed per screen sizes. use your own UI to switch modes as well.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
@ -14,24 +14,26 @@
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/${slotProps.data.image}`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -39,23 +41,25 @@
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/${slotProps.data.image}`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -83,24 +87,26 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -108,23 +114,25 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -142,24 +150,26 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -167,23 +177,25 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -236,24 +248,26 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -261,23 +275,25 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
</div> </div>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>

32
doc/dataview/LoadingDoc.vue
View File

@ -11,7 +11,8 @@
</template> </template>
<template #list> <template #list>
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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 shadow-2 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">
@ -30,10 +31,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template #grid> <template #grid>
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" /> <Skeleton class="w-6rem border-round h-2rem" />
@ -50,6 +53,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
</DataView> </DataView>
</div> </div>
@ -74,7 +78,8 @@ export default {
</template> </template>
<template #list> <template #list>
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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 shadow-2 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">
@ -93,10 +98,12 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template #grid> <template #grid>
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" /> <Skeleton class="w-6rem border-round h-2rem" />
@ -113,6 +120,7 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
</DataView> </DataView>
`, `,
@ -127,7 +135,8 @@ export default {
</template> </template>
<template #list> <template #list>
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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 shadow-2 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">
@ -146,10 +155,12 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template #grid> <template #grid>
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" /> <Skeleton class="w-6rem border-round h-2rem" />
@ -166,6 +177,7 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
</DataView> </DataView>
</div> </div>
@ -215,7 +227,8 @@ export default {
</template> </template>
<template #list> <template #list>
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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 shadow-2 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">
@ -234,10 +247,12 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template #grid> <template #grid>
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" /> <Skeleton class="w-6rem border-round h-2rem" />
@ -254,6 +269,7 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
</DataView> </DataView>
</div> </div>

72
doc/dataview/PaginationDoc.vue
View File

@ -5,24 +5,26 @@
<div class="card"> <div class="card">
<DataView :value="products" paginator :rows="5"> <DataView :value="products" paginator :rows="5">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/${slotProps.data.image}`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -44,24 +46,26 @@ export default {
basic: ` basic: `
<DataView :value="products" paginator :rows="5"> <DataView :value="products" paginator :rows="5">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -74,24 +78,26 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products" paginator :rows="5"> <DataView :value="products" paginator :rows="5">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -138,24 +144,26 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products" paginator :rows="5"> <DataView :value="products" paginator :rows="5">
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>

24
doc/dataview/PrimeFlexDoc.vue
View File

@ -1,24 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.</p>
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
npm install primeflex
`
},
code2: {
basic: "\nimport 'primeflex/primeflex.css'\n"
}
};
}
};
</script>

72
doc/dataview/SortingDoc.vue
View File

@ -8,24 +8,26 @@
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/${slotProps.data.image}`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -57,24 +59,26 @@ export default {
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -90,24 +94,26 @@ export default {
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -178,24 +184,26 @@ export default {
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -21,24 +21,26 @@
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/${slotProps.data.image}`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -46,23 +48,25 @@
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/${slotProps.data.image}`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.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>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -102,24 +106,26 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -127,23 +133,25 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.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>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -173,24 +181,26 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -198,23 +208,25 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.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>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -279,24 +291,26 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="grid grid-nogutter">
<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"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <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" />
<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">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-900">{{ item.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2"> <span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -304,23 +318,25 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round"> <div class="p-4 border-1 surface-border surface-card border-round">
<div class="flex flex-wrap align-items-center justify-content-between gap-2"> <div class="flex flex-wrap align-items-center justify-content-between gap-2">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<i class="pi pi-tag"></i> <i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span> <span class="font-semibold">{{ item.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="text-2xl font-bold">{{ slotProps.data.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>
<div class="flex align-items-center justify-content-between"> <div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div> </div>
</div> </div>
</div> </div>

28
doc/dataview/theming/TailwindDoc.vue
View File

@ -62,24 +62,24 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="flex-initial shrink-0 w-full"> <div class="flex-initial shrink-0 w-full">
<div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4 bg-white dark:bg-gray-900"> <div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4 bg-white dark:bg-gray-900">
<img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded-md " :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded-md " :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.items.image}\`" :alt="slotProps.items.name" />
<div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4"> <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
<div class="flex flex-col items-center sm:items-start gap-3"> <div class="flex flex-col items-center sm:items-start gap-3">
<div class="text-2xl font-bold text-gray-700 dark:text-white/80"> <div class="text-2xl font-bold text-gray-700 dark:text-white/80">
{{ slotProps.data.name }} {{ slotProps.items.name }}
</div> </div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="slotProps.items.rating" readonly :cancel="false"></Rating>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<i class="pi pi-tag text-gray-700 dark:text-white/80"></i> <i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
<span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.data.category }}</span> <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.items.category }}</span>
</span> </span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="slotProps.items.inventoryStatus" :severity="getSeverity(slotProps.items)"></Tag>
</div> </div>
</div> </div>
<div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2"> <div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.items.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.items.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>
@ -92,18 +92,18 @@ export default {
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<i class="pi pi-tag text-gray-700 dark:text-white/80"></i> <i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
<span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.data.category }}</span> <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.items.category }}</span>
</div> </div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> <Tag :value="slotProps.items.inventoryStatus" :severity="getSeverity(slotProps.items)"></Tag>
</div> </div>
<div class="flex flex-col items-center gap-3 py-5"> <div class="flex flex-col items-center gap-3 py-5">
<img class="w-3/4 shadow-md rounded-md" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> <img class="w-3/4 shadow-md rounded-md" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.items.image}\`" :alt="slotProps.items.name" />
<div class="text-2xl font-bold text-gray-700 dark:text-white/80">{{ slotProps.data.name }}</div> <div class="text-2xl font-bold text-gray-700 dark:text-white/80">{{ slotProps.items.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> <Rating :modelValue="slotProps.items.rating" readonly :cancel="false"></Rating>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</span> <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.items.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.items.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> </div>
</div> </div>
</div> </div>

6
pages/dataview/index.vue
View File

@ -17,7 +17,6 @@ import ImportDoc from '@/doc/dataview/ImportDoc.vue';
import LayoutDoc from '@/doc/dataview/LayoutDoc.vue'; import LayoutDoc from '@/doc/dataview/LayoutDoc.vue';
import LoadingDoc from '@/doc/dataview/LoadingDoc.vue'; import LoadingDoc from '@/doc/dataview/LoadingDoc.vue';
import PaginationDoc from '@/doc/dataview/PaginationDoc.vue'; import PaginationDoc from '@/doc/dataview/PaginationDoc.vue';
import PrimeFlexDoc from '@/doc/dataview/PrimeFlexDoc.vue';
import SortingDoc from '@/doc/dataview/SortingDoc.vue'; import SortingDoc from '@/doc/dataview/SortingDoc.vue';
import PTComponent from '@/doc/dataview/pt/index.vue'; import PTComponent from '@/doc/dataview/pt/index.vue';
import ThemingDoc from '@/doc/dataview/theming/index.vue'; import ThemingDoc from '@/doc/dataview/theming/index.vue';
@ -31,11 +30,6 @@ export default {
label: 'Import', label: 'Import',
component: ImportDoc component: ImportDoc
}, },
{
id: 'primeflex',
label: 'PrimeFlex',
component: PrimeFlexDoc
},
{ {
id: 'basic', id: 'basic',
label: 'Basic', label: 'Basic',