From d103a8ef15e2c896a8c9580524c4d242dc4abb60 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 24 May 2024 09:45:57 +0300
Subject: [PATCH] Fixed DataView loading demo, aligned breakpoints

---
 doc/autocomplete/TemplateDoc.vue |   8 +-
 doc/dataview/LoadingDoc.vue      | 124 ++++++++++++++++---------------
 tailwind.config.js               |  11 ++-
 3 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/doc/autocomplete/TemplateDoc.vue b/doc/autocomplete/TemplateDoc.vue
index 608a0d02f..37017e554 100644
--- a/doc/autocomplete/TemplateDoc.vue
+++ b/doc/autocomplete/TemplateDoc.vue
@@ -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>
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index 42c3f1a8f..d48a6bbe3 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -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>
diff --git a/tailwind.config.js b/tailwind.config.js
index b46658ce5..605b7f2e6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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'
+        }
+    }
 };