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

Update dataview samples

pull/5806/head
Cagatay Civici 2024-05-21 14:38:41 +03:00
parent 5e3b79d6dc
commit 87028141bd
5 changed files with 60 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
doc/dataview/BasicDoc.vue
View File

@ -5,9 +5,9 @@
<div class="card"> <div class="card">
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -53,9 +53,9 @@ export default {
basic: ` basic: `
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -92,9 +92,9 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -165,9 +165,9 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>

24
doc/dataview/LayoutDoc.vue
View File

@ -15,9 +15,9 @@
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -111,9 +111,9 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -196,9 +196,9 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -317,9 +317,9 @@ export default {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index"">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>

24
doc/dataview/LoadingDoc.vue
View File

@ -15,8 +15,8 @@
</template> </template>
<template #list> <template #list>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="i in 6" :key="i" class="col-span-12"> <div v-for="i in 6" :key="i">
<div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" /> <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
<div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6"> <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@ -39,7 +39,7 @@
</template> </template>
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="grid grid-cols-12 gap-4">
<div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2"> <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded"> <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
@ -87,8 +87,8 @@ export default {
</template> </template>
<template #list> <template #list>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="i in 6" :key="i" class="col-span-12"> <div v-for="i in 6" :key="i">
<div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" /> <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
<div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6"> <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@ -111,7 +111,7 @@ export default {
</template> </template>
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="grid grid-cols-12 gap-4">
<div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2"> <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded"> <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
@ -148,8 +148,8 @@ export default {
</template> </template>
<template #list> <template #list>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="i in 6" :key="i" class="col-span-12"> <div v-for="i in 6" :key="i">
<div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" /> <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
<div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6"> <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@ -172,7 +172,7 @@ export default {
</template> </template>
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="grid grid-cols-12 gap-4">
<div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2"> <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded"> <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
@ -245,8 +245,8 @@ export default {
</template> </template>
<template #list> <template #list>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="i in 6" :key="i" class="col-span-12"> <div v-for="i in 6" :key="i">
<div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" /> <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
<div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6"> <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@ -269,7 +269,7 @@ export default {
</template> </template>
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="grid grid-cols-12 gap-4">
<div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2"> <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded"> <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">

24
doc/dataview/PaginationDoc.vue
View File

@ -5,9 +5,9 @@
<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="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -53,9 +53,9 @@ export default {
basic: ` basic: `
<DataView :value="products" paginator :rows="5"> <DataView :value="products" paginator :rows="5">
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -92,9 +92,9 @@ 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="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -165,9 +165,9 @@ 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="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>

24
doc/dataview/SortingDoc.vue
View File

@ -8,9 +8,9 @@
<Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -66,9 +66,9 @@ export default {
<Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -108,9 +108,9 @@ export default {
<Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>
@ -205,9 +205,9 @@ export default {
<Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="block xl:block mx-auto rounded 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>