DataView list slot demo updates

pull/4823/head
tugcekucukoglu 2023-11-15 13:39:37 +03:00
parent 7d27e40e32
commit 6d845691a5
6 changed files with 24 additions and 24 deletions

View File

@ -7,7 +7,7 @@
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -48,7 +48,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -80,7 +80,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -146,7 +146,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">

View File

@ -16,7 +16,7 @@
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -89,7 +89,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -152,7 +152,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -250,7 +250,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">

View File

@ -13,7 +13,7 @@
<template #list> <template #list>
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem 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">
<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">
@ -80,7 +80,7 @@ export default {
<template #list> <template #list>
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem 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">
<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">
@ -137,7 +137,7 @@ export default {
<template #list> <template #list>
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem 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">
<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">
@ -229,7 +229,7 @@ export default {
<template #list> <template #list>
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="i in 6" :key="i" class="col-12"> <div v-for="i in 6" :key="i" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
<Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" /> <Skeleton class="w-9 sm:w-16rem xl:w-10rem 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">
<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">

View File

@ -7,7 +7,7 @@
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -48,7 +48,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -80,7 +80,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -146,7 +146,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">

View File

@ -10,7 +10,7 @@
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -61,7 +61,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -96,7 +96,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -186,7 +186,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">

View File

@ -23,7 +23,7 @@
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -108,7 +108,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -183,7 +183,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">
@ -293,7 +293,7 @@ export default {
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" /> <img class="w-9 sm:w-16rem xl:w-10rem 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">