Fixed DataView loading demo, aligned breakpoints
Cagatay Civici
parent
8119a873dd
commit
d103a8ef15
|
|
@ -8,7 +8,7 @@
|
|||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
|
||||
<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" />
|
||||
<div>{{ slotProps.option.name }}</div>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
basic: `
|
||||
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
|
||||
<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" />
|
||||
<div>{{ slotProps.option.name }}</div>
|
||||
</div>
|
||||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
|
||||
<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" />
|
||||
<div>{{ slotProps.option.name }}</div>
|
||||
</div>
|
||||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
|
||||
<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" />
|
||||
<div>{{ slotProps.option.name }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,19 +18,20 @@
|
|||
<div class="flex flex-col">
|
||||
<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 }">
|
||||
<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 items-center sm:items-start gap-4">
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton size="3rem" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,20 +41,20 @@
|
|||
|
||||
<template #grid>
|
||||
<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="flex flex-wrap items-center justify-between gap-2">
|
||||
<Skeleton class="w-24 rounded h-8" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="2rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 py-8">
|
||||
<Skeleton class="w-9/12 rounded h-40" />
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="75%" height="10rem" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,19 +91,20 @@ export default {
|
|||
<div class="flex flex-col">
|
||||
<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 }">
|
||||
<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 items-center sm:items-start gap-4">
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton size="3rem" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -112,20 +114,20 @@ export default {
|
|||
|
||||
<template #grid>
|
||||
<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="flex flex-wrap items-center justify-between gap-2">
|
||||
<Skeleton class="w-24 rounded h-8" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="2rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 py-8">
|
||||
<Skeleton class="w-9/12 rounded h-40" />
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="75%" height="10rem" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,19 +153,20 @@ export default {
|
|||
<div class="flex flex-col">
|
||||
<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 }">
|
||||
<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 items-center sm:items-start gap-4">
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton size="3rem" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -173,20 +176,20 @@ export default {
|
|||
|
||||
<template #grid>
|
||||
<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="flex flex-wrap items-center justify-between gap-2">
|
||||
<Skeleton class="w-24 rounded h-8" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="2rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 py-8">
|
||||
<Skeleton class="w-9/12 rounded h-40" />
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="75%" height="10rem" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -248,19 +251,20 @@ export default {
|
|||
<div class="flex flex-col">
|
||||
<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 }">
|
||||
<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 items-center sm:items-start gap-4">
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton size="3rem" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -270,20 +274,20 @@ export default {
|
|||
|
||||
<template #grid>
|
||||
<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="flex flex-wrap items-center justify-between gap-2">
|
||||
<Skeleton class="w-24 rounded h-8" />
|
||||
<Skeleton class="w-12 rounded h-4" />
|
||||
<Skeleton width="6rem" height="2rem" />
|
||||
<Skeleton width="3rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 py-8">
|
||||
<Skeleton class="w-9/12 rounded h-40" />
|
||||
<Skeleton class="w-32 rounded h-8" />
|
||||
<Skeleton class="w-24 rounded h-4" />
|
||||
<Skeleton width="75%" height="10rem" />
|
||||
<Skeleton width="8rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<Skeleton class="w-16 rounded h-8" />
|
||||
<Skeleton shape="circle" class="w-12 h-12" />
|
||||
<Skeleton width="4rem" height="2rem" />
|
||||
<Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,5 +7,14 @@ module.exports = {
|
|||
},
|
||||
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'],
|
||||
plugins: [primeui]
|
||||
plugins: [primeui],
|
||||
theme: {
|
||||
screens: {
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
'2xl': '1920px'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue