From 8119a873ddc5c1b07616deacc3699f87899c3aca Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 24 May 2024 09:25:19 +0300
Subject: [PATCH] Fixed datataview grid layout

---
 components/lib/dataview/DataView.spec.js |  2 +-
 doc/dataview/LayoutDoc.vue               | 28 ++++++++++++------------
 doc/dataview/LoadingDoc.vue              | 20 ++++++++---------
 doc/galleria/AdvancedDoc.vue             |  8 +++----
 doc/galleria/ResponsiveDoc.vue           |  8 +++----
 doc/galleria/ThumbnailDoc.vue            |  8 +++----
 package-lock.json                        |  8 +++----
 package.json                             |  2 +-
 8 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/components/lib/dataview/DataView.spec.js b/components/lib/dataview/DataView.spec.js
index 05b76f1e7..5f08a3804 100644
--- a/components/lib/dataview/DataView.spec.js
+++ b/components/lib/dataview/DataView.spec.js
@@ -54,7 +54,7 @@ describe('DataView.vue', () => {
             slots: {
                 grid: `
                     <template #grid="slotProps">
-                        <div class="grid grid-nogutter">
+                        <div class="grid">
                             <div v-for="(item, index) in slotProps.items" :key="index"  class="col-12 md:col-4">
                                 <div class="product-grid-item card">
                                     <div class="product-grid-item-top">
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index eb6b92830..7b7134aea 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -8,7 +8,7 @@
                 <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                         </template>
                     </SelectButton>
                 </div>
@@ -49,7 +49,7 @@
             </template>
 
             <template #grid="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                <div class="grid grid-cols-12 gap-4">
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
                         <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                             <div class="bg-surface-50 flex justify-center rounded p-4">
@@ -95,8 +95,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid grid-cols-12 gap-4',
-            options: ['list', 'grid grid-cols-12 gap-4'],
+            layout: 'grid',
+            options: ['list', 'grid'],
             code: {
                 basic: `
 <DataView :value="products" :layout="layout">
@@ -104,7 +104,7 @@ export default {
         <div class="flex justify-end">
             <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                 <template #option="{ option }">
-                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                 </template>
             </SelectButton>
         </div>
@@ -145,7 +145,7 @@ export default {
     </template>
 
     <template #grid="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+        <div class="grid grid-cols-12 gap-4">
             <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
                 <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                     <div class="bg-surface-50 flex justify-center rounded p-4">
@@ -189,7 +189,7 @@ export default {
                 <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                         </template>
                     </SelectButton>
                 </div>
@@ -230,7 +230,7 @@ export default {
             </template>
 
             <template #grid="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                <div class="grid grid-cols-12 gap-4">
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
                         <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                             <div class="bg-surface-50 flex justify-center rounded p-4">
@@ -275,8 +275,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid grid-cols-12 gap-4',
-            options: ['list', 'grid grid-cols-12 gap-4'],
+            layout: 'grid',
+            options: ['list', 'grid'],
         }
     },
     mounted() {
@@ -310,7 +310,7 @@ export default {
                 <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                         </template>
                     </SelectButton>
                 </div>
@@ -351,7 +351,7 @@ export default {
             </template>
 
             <template #grid="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                <div class="grid grid-cols-12 gap-4">
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
                         <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                             <div class="bg-surface-50 flex justify-center rounded p-4">
@@ -398,8 +398,8 @@ onMounted(() => {
 });
 
 const products = ref();
-const layout = ref('grid grid-cols-12 gap-4');
-const options = ref(['list', 'grid grid-cols-12 gap-4']);
+const layout = ref('grid');
+const options = ref(['list', 'grid']);
 
 const getSeverity = (product) => {
     switch (product.inventoryStatus) {
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index eeb884bd1..42c3f1a8f 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -8,7 +8,7 @@
                 <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                         </template>
                     </SelectButton>
                 </div>
@@ -71,8 +71,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid grid-cols-12 gap-4',
-            options: ['list', 'grid grid-cols-12 gap-4'],
+            layout: 'grid',
+            options: ['list', 'grid'],
             code: {
                 basic: `
 <DataView :value="products" :layout="layout">
@@ -80,7 +80,7 @@ export default {
         <div class="flex justify-end">
             <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                 <template #option="{ option }">
-                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                 </template>
             </SelectButton>
         </div>
@@ -141,7 +141,7 @@ export default {
                 <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                         </template>
                     </SelectButton>
                 </div>
@@ -203,8 +203,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid grid-cols-12 gap-4',
-            options: ['list', 'grid grid-cols-12 gap-4'],
+            layout: 'grid',
+            options: ['list', 'grid'],
         }
     },
     mounted() {
@@ -238,7 +238,7 @@ export default {
                 <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                         </template>
                     </SelectButton>
                 </div>
@@ -302,8 +302,8 @@ onMounted(() => {
 });
 
 const products = ref();
-const layout = ref('grid grid-cols-12 gap-4');
-const options = ref(['list', 'grid grid-cols-12 gap-4']);
+const layout = ref('grid');
+const options = ref(['list', 'grid']);
 
 const getSeverity = (product) => {
     switch (product.inventoryStatus) {
diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index 0e79ede60..588d22453 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -31,7 +31,7 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                    <div class="grid grid-cols-12 gap-4 justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </div>
                 </template>
@@ -105,7 +105,7 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+        <div class="grid grid-cols-12 gap-4 justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
         </div>
     </template>
@@ -154,7 +154,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                <div class="grid grid-cols-12 gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                 </div>
             </template>
@@ -300,7 +300,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                <div class="grid grid-cols-12 gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                 </div>
             </template>
diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index 058fdb782..eae5b2036 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -9,7 +9,7 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                    <div class="grid grid-cols-12 gap-4 justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </div>
                 </template>
@@ -43,7 +43,7 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+        <div class="grid grid-cols-12 gap-4 justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
         </div>
     </template>
@@ -57,7 +57,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                <div class="grid grid-cols-12 gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </div>
             </template>
@@ -98,7 +98,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                <div class="grid grid-cols-12 gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </div>
             </template>
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 9667685d1..139d19a8e 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -15,7 +15,7 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                    <div class="grid grid-cols-12 gap-4 justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </div>
                 </template>
@@ -68,7 +68,7 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+        <div class="grid grid-cols-12 gap-4 justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
         </div>
     </template>
@@ -88,7 +88,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                <div class="grid grid-cols-12 gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                 </div>
             </template>
@@ -154,7 +154,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
+                <div class="grid grid-cols-12 gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                 </div>
             </template>
diff --git a/package-lock.json b/package-lock.json
index e2378832b..e3e40ebee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
                 "sass": "^1.45.0",
                 "sass-loader": "^8.0.2",
                 "tailwindcss": "^3.4.1",
-                "tailwindcss-primeui": "^0.1.0",
+                "tailwindcss-primeui": "^0.2.0",
                 "typedoc": "0.23.23",
                 "typescript": "^4.9.4",
                 "vitest": "^0.29.8"
@@ -12263,9 +12263,9 @@
             }
         },
         "node_modules/tailwindcss-primeui": {
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.1.0.tgz",
-            "integrity": "sha512-nF6AUxJ1OGCiKR06D00h3e8qWEB+D602wEYw2C8vk5W8bIiNwfO62dsIiaHBy+GVUHYK64F1AMscF0rUB0Y9Dw==",
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.2.0.tgz",
+            "integrity": "sha512-HnR59OhL/hAjgLms32q6afIRf7GtYFwrI8GlLcpK9280/G5i/gQXwJQLgjO8qFoIZHZw9uEKj/0C/YqGvHdRcA==",
             "dev": true,
             "peerDependencies": {
                 "tailwindcss": ">=3.1.0"
diff --git a/package.json b/package.json
index 69cb2f1dc..c650675c7 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
         "sass": "^1.45.0",
         "sass-loader": "^8.0.2",
         "tailwindcss": "^3.4.1",
-        "tailwindcss-primeui": "^0.1.0",
+        "tailwindcss-primeui": "^0.2.0",
         "typedoc": "0.23.23",
         "typescript": "^4.9.4",
         "vitest": "^0.29.8"