Fixed #4818 - Remove primeflex dependency from DataView

components/lib/dataview/DataView.d.ts

@@ -81,14 +81,6 @@ export interface DataViewPassThroughOptions {
      * Used to pass attributes to the content's DOM element.
      */
     content?: DataViewPassThroughOptionType;
-    /**
-     * Used to pass attributes to the grid's DOM element.
-     */
-    grid?: DataViewPassThroughOptionType;
-    /**
-     * Used to pass attributes to the column's DOM element.
-     */
-    column?: DataViewPassThroughOptionType;
     /**
      * Used to pass attributes to the empty message's DOM element.
      */
@@ -253,8 +245,14 @@ export interface DataViewSlots {
     footer(): VNode[];
     /**
      * Custom empty template.
+     * @param {Object} scope - empty slot's params.
      */
-    empty(): VNode[];
+    empty(scope: {
+        /**
+         * Layout of the items.
+         */
+        layout?: string | undefined;
+    }): VNode[];
     /**
      * Custom paginator start template.
      */
@@ -271,11 +269,7 @@ export interface DataViewSlots {
         /**
          * Value of the component
          */
-        data: any;
-        /**
-         * Index of the grid
-         */
-        index: number;
+        items: any;
     }): VNode[];
     /**
      * Custom list template.
@@ -285,11 +279,7 @@ export interface DataViewSlots {
         /**
          * Value of the component
          */
-        data: any;
-        /**
-         * Index of the grid
-         */
-        index: number;
+        items: any;
     }): VNode[];
 }
 

components/lib/dataview/DataView.vue

@@ -26,16 +26,14 @@
             </template>
         </DVPaginator>
         <div :class="cx('content')" v-bind="ptm('content')">
-            <div :class="cx('grid')" v-bind="ptm('grid')">
-                <template v-for="(item, index) of items" :key="getKey(item, index)">
-                    <slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
-                    <slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
-                </template>
-                <div v-if="empty" :class="cx('column')" v-bind="ptm('column')">
-                    <div :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
-                        <slot name="empty"></slot>
-                    </div>
-                </div>
+            <template v-if="!empty">
+                <slot v-if="$slots.list && layout === 'list'" name="list" :items="items"></slot>
+                <slot v-if="$slots.grid && layout === 'grid'" name="grid" :items="items"></slot>
+            </template>
+            <div v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
+                <slot name="empty" :layout="layout">
+                    {{ emptyMessageText }}
+                </slot>
             </div>
         </div>
         <DVPaginator
@@ -137,6 +135,9 @@ export default {
         empty() {
             return !this.value || this.value.length === 0;
         },
+        emptyMessageText() {
+            return this.$primevue.config?.locale?.emptyMessage || '';
+        },
         paginatorTop() {
             return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
         },

components/lib/dataview/style/DataViewStyle.js

@@ -11,8 +11,6 @@ const classes = {
     header: 'p-dataview-header',
     paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
     content: 'p-dataview-content',
-    grid: 'p-grid p-nogutter grid grid-nogutter',
-    column: 'p-col col',
     emptyMessage: 'p-dataview-emptymessage',
     footer: 'p-dataview-footer'
 };