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

Fixed dataview demo

pull/6483/head
Cagatay Civici 2024-09-26 11:37:19 +03:00
parent abae780113
commit fd428bdb11
1 changed files with 6 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/showcase/doc/dataview/BasicDoc.vue
View File

@ -7,12 +7,10 @@
<template #list="slotProps"> <template #list="slotProps">
<div class="flex flex-col"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center gap-4"> <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="rounded w-36" :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" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px"> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
</div> </div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@ -60,9 +58,7 @@ export default {
<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="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" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px"> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
</div> </div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@ -101,9 +97,7 @@ export default {
<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="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" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px"> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
</div> </div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@ -176,9 +170,7 @@ export default {
<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="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" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px"> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
</div> </div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">