vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-08 16:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #4818 - Remove primeflex dependency from DataView

Browse source
This commit is contained in:
mertsincan 2023-11-15 09:51:35 +00:00
parent 3231777755
commit 2026bb75e4
12 changed files with 690 additions and 661 deletions
Download patch file Download diff file Expand all files Collapse all files

234
doc/dataview/LoadingDoc.vue
View file

@ -11,21 +11,23 @@
</template>
<template #list>
<div class="col-12">
<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" />
<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">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<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">
<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 align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
@ -33,20 +35,22 @@
</template>
<template #grid>
<div 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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
<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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
</div>
@ -74,21 +78,23 @@ export default {
</template>
<template #list>
<div class="col-12">
<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" />
<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">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<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">
<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 align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
@ -96,20 +102,22 @@ export default {
</template>
<template #grid>
<div 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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
<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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
</div>
@ -127,21 +135,23 @@ export default {
</template>
<template #list>
<div class="col-12">
<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" />
<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">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<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">
<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 align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
@ -149,20 +159,22 @@ export default {
</template>
<template #grid>
<div 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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
<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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
</div>
@ -215,21 +227,23 @@ export default {
</template>
<template #list>
<div class="col-12">
<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" />
<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">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<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">
<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 align-items-center sm:align-items-start gap-3">
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
<div class="flex align-items-center gap-3">
<Skeleton class="w-6rem border-round h-1rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
@ -237,20 +251,22 @@ export default {
</template>
<template #grid>
<div 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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
<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="flex flex-wrap align-items-center justify-content-between gap-2">
<Skeleton class="w-6rem border-round h-2rem" />
<Skeleton class="w-3rem border-round h-1rem" />
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<Skeleton class="w-9 shadow-2 border-round h-10rem" />
<Skeleton class="w-8rem border-round h-2rem" />
<Skeleton class="w-6rem border-round h-1rem" />
</div>
<div class="flex align-items-center justify-content-between">
<Skeleton class="w-4rem border-round h-2rem" />
<Skeleton shape="circle" class="w-3rem h-3rem" />
</div>
</div>
</div>
</div>
@ -289,7 +305,7 @@ const getSeverity = (product) => {
<\/script>
`,
data: `
/* ProductService */
/* ProductService */
{
id: '1000',
code: 'f230fh0g3',