Refactor #3965 - For DataView & DataViewLayoutOptions

components/lib/dataview/BaseDataView.vue

@@ -19,6 +19,8 @@ const classes = {
     footer: 'p-dataview-footer'
 };
 
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_dataview_style', manual: true });
+
 export default {
     name: 'BaseDataView',
     extends: BaseComponent,
@@ -89,7 +91,8 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
     provide() {
         return {

components/lib/dataview/DataView.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="dataview">
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
@@ -67,9 +67,9 @@
 </template>
 
 <script>
-import BaseDataView from './BaseDataView.vue';
 import Paginator from 'primevue/paginator';
 import { ObjectUtils } from 'primevue/utils';
+import BaseDataView from './BaseDataView.vue';
 
 export default {
     name: 'DataView',

components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue

@@ -17,6 +17,8 @@ const classes = {
     ]
 };
 
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_dataviewlayoutoptions_style', manual: true });
+
 export default {
     name: 'BaseDataViewLayoutOptions',
     extends: BaseComponent,
@@ -24,7 +26,8 @@ export default {
         modelValue: String
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
     provide() {
         return {

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script>
-import BaseDataViewLayoutOptions from './BaseDataViewLayoutOptions.vue';
 import BarsIcon from 'primevue/icons/bars';
 import ThLargeIcon from 'primevue/icons/thlarge';
+import BaseDataViewLayoutOptions from './BaseDataViewLayoutOptions.vue';
 
 export default {
     name: 'DataViewLayoutOptions',