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

Fixed DataView loading demo, aligned breakpoints

pull/5806/head
Cagatay Civici 2024-05-24 09:45:57 +03:00
parent 8119a873dd
commit d103a8ef15
3 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/autocomplete/TemplateDoc.vue
View File

@ -8,7 +8,7 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search"> <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-options-center"> <div class="flex items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
@ -30,7 +30,7 @@ export default {
basic: ` basic: `
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search"> <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-options-center"> <div class="flex items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
@ -42,7 +42,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search"> <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-options-center"> <div class="flex items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
@ -86,7 +86,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search"> <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-options-center"> <div class="flex items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>

124
doc/dataview/LoadingDoc.vue
View File

@ -18,19 +18,20 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div v-for="i in 6" :key="i"> <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-t border-surface-200 dark:border-surface-700': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-t border-surface-200 dark:border-surface-700': 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 mx-auto" />
<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">
<div class="flex flex-col items-center sm:items-start gap-4"> <div class="flex flex-col items-center sm:items-start gap-4">
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
</div> </div>
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2"> <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton size="3rem" shape="circle" />
</div> </div>
</div> </div>
</div> </div>
@ -40,20 +41,20 @@
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4"> <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 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">
<Skeleton class="w-24 rounded h-8" /> <Skeleton width="6rem" height="2rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
<div class="flex flex-col items-center gap-4 py-8"> <div class="flex flex-col items-center gap-4 py-8">
<Skeleton class="w-9/12 rounded h-40" /> <Skeleton width="75%" height="10rem" />
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
</div> </div>
</div> </div>
</div> </div>
@ -90,19 +91,20 @@ export default {
<div class="flex flex-col"> <div class="flex flex-col">
<div v-for="i in 6" :key="i"> <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-t border-surface-200 dark:border-surface-700': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-t border-surface-200 dark:border-surface-700': 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 mx-auto" />
<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">
<div class="flex flex-col items-center sm:items-start gap-4"> <div class="flex flex-col items-center sm:items-start gap-4">
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
</div> </div>
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2"> <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton size="3rem" shape="circle" />
</div> </div>
</div> </div>
</div> </div>
@ -112,20 +114,20 @@ export default {
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4"> <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 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">
<Skeleton class="w-24 rounded h-8" /> <Skeleton width="6rem" height="2rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
<div class="flex flex-col items-center gap-4 py-8"> <div class="flex flex-col items-center gap-4 py-8">
<Skeleton class="w-9/12 rounded h-40" /> <Skeleton width="75%" height="10rem" />
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
</div> </div>
</div> </div>
</div> </div>
@ -151,19 +153,20 @@ export default {
<div class="flex flex-col"> <div class="flex flex-col">
<div v-for="i in 6" :key="i"> <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-t border-surface-200 dark:border-surface-700': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-t border-surface-200 dark:border-surface-700': 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 mx-auto" />
<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">
<div class="flex flex-col items-center sm:items-start gap-4"> <div class="flex flex-col items-center sm:items-start gap-4">
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
</div> </div>
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2"> <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton size="3rem" shape="circle" />
</div> </div>
</div> </div>
</div> </div>
@ -173,20 +176,20 @@ export default {
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4"> <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 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">
<Skeleton class="w-24 rounded h-8" /> <Skeleton width="6rem" height="2rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
<div class="flex flex-col items-center gap-4 py-8"> <div class="flex flex-col items-center gap-4 py-8">
<Skeleton class="w-9/12 rounded h-40" /> <Skeleton width="75%" height="10rem" />
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
</div> </div>
</div> </div>
</div> </div>
@ -248,19 +251,20 @@ export default {
<div class="flex flex-col"> <div class="flex flex-col">
<div v-for="i in 6" :key="i"> <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-t border-surface-200 dark:border-surface-700': i !== 0 }"> <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-t border-surface-200 dark:border-surface-700': 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 mx-auto" />
<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">
<div class="flex flex-col items-center sm:items-start gap-4"> <div class="flex flex-col items-center sm:items-start gap-4">
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
</div> </div>
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2"> <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton size="3rem" shape="circle" />
</div> </div>
</div> </div>
</div> </div>
@ -270,20 +274,20 @@ export default {
<template #grid> <template #grid>
<div class="grid grid-cols-12 gap-4"> <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 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">
<Skeleton class="w-24 rounded h-8" /> <Skeleton width="6rem" height="2rem" />
<Skeleton class="w-12 rounded h-4" /> <Skeleton width="3rem" height="1rem" />
</div> </div>
<div class="flex flex-col items-center gap-4 py-8"> <div class="flex flex-col items-center gap-4 py-8">
<Skeleton class="w-9/12 rounded h-40" /> <Skeleton width="75%" height="10rem" />
<Skeleton class="w-32 rounded h-8" /> <Skeleton width="8rem" height="2rem" />
<Skeleton class="w-24 rounded h-4" /> <Skeleton width="6rem" height="1rem" />
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<Skeleton class="w-16 rounded h-8" /> <Skeleton width="4rem" height="2rem" />
<Skeleton shape="circle" class="w-12 h-12" /> <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
</div> </div>
</div> </div>
</div> </div>

11
tailwind.config.js
View File

@ -7,5 +7,14 @@ module.exports = {
}, },
darkMode: ['selector', '[class="p-dark"]'], darkMode: ['selector', '[class="p-dark"]'],
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'], content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
plugins: [primeui] plugins: [primeui],
theme: {
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
'2xl': '1920px'
}
}
}; };