Refactor #3924 - For DataView & DataViewLayoutOptions

api-generator/components/dataview.js

@@ -94,6 +94,12 @@ const DataViewProps = [
         type: 'string',
         default: 'null',
         description: 'Name of the data that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/dataviewlayoutoptions.js

@@ -4,6 +4,12 @@ const DataViewLayoutOptionsProps = [
         type: 'string',
         default: 'null',
         description: 'Value of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -20,6 +20,8 @@ import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
 import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
 import { ContextMenuPassThroughOptions } from '../contextmenu';
 import { DataTablePassThroughOptions } from '../datatable';
+import { DataViewPassThroughOptions } from '../dataview';
+import { DataViewLayoutOptionsPassThroughOptions } from '../dataviewlayoutoptions';
 import { DeferredContentPassThroughOptions } from '../deferredcontent';
 import { DialogPassThroughOptions } from '../dialog';
 import { DividerPassThroughOptions } from '../divider';
@@ -112,6 +114,8 @@ interface PrimeVuePTOptions {
     confirmpopup?: ConfirmPopupPassThroughOptions;
     contextmenu?: ContextMenuPassThroughOptions;
     datatable?: DataTablePassThroughOptions;
+    dataview?: DataViewPassThroughOptions;
+    dataviewlayoutoptions?: DataViewLayoutOptionsPassThroughOptions;
     deferredcontent?: DeferredContentPassThroughOptions;
     divider?: DividerPassThroughOptions;
     dialog?: DialogPassThroughOptions;

components/lib/dataview/DataView.d.ts

@@ -8,8 +8,18 @@
  *
  */
 import { VNode } from 'vue';
+import { PaginatorPassThroughOptionType } from '../paginator';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DataViewPassThroughOptionType = DataViewPassThroughAttributes | ((options: DataViewPassThroughMethodOptions) => DataViewPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewPassThroughMethodOptions {
+    props: DataViewProps;
+    state: DataViewState;
+}
 /**
  * Custom page event.
  * @see {@link DataViewEmits.page}
@@ -33,6 +43,63 @@ export interface DataViewPageEvent {
     pageCount: number;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewProps.pt}
+ */
+export interface DataViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptionType}
+     */
+    paginator?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column's DOM element.
+     */
+    column?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DataViewPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DataViewPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in DataView component.
+ */
+export interface DataViewState {
+    /**
+     * Current index of first record as a number.
+     */
+    d_first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+}
+
 /**
  * Defines valid properties in DataView component. In addition to these, all properties of HTMLDivElement can be used in this component.
  */
@@ -130,6 +197,11 @@ export interface DataViewProps {
      * Name of the data that uniquely identifies the a record in the data.
      */
     dataKey: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataViewPassThroughOptions}
+     */
+    pt?: DataViewPassThroughOptions;
 }
 
 /**

components/lib/dataview/DataView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
-        <div v-if="$slots.header" class="p-dataview-header">
+        <div v-if="$slots.header" class="p-dataview-header" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
         <DVPaginator
@@ -15,6 +15,7 @@
             :class="{ 'p-paginator-top': paginatorTop }"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
+            :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -23,14 +24,14 @@
                 <slot name="paginatorend"></slot>
             </template>
         </DVPaginator>
-        <div class="p-dataview-content">
+        <div class="p-dataview-content" v-bind="ptm('content')">
-            <div class="p-grid p-nogutter grid grid-nogutter">
+            <div class="p-grid p-nogutter grid grid-nogutter" 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="p-col col">
+                <div v-if="empty" class="p-col col" v-bind="ptm('column')">
-                    <div class="p-dataview-emptymessage">
+                    <div class="p-dataview-emptymessage" v-bind="ptm('emptyMessage')">
                         <slot name="empty"></slot>
                     </div>
                 </div>
@@ -48,6 +49,7 @@
             :class="{ 'p-paginator-bottom': paginatorBottom }"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
+            :pt="ptm('root')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -56,17 +58,20 @@
                 <slot name="paginatorend"></slot>
             </template>
         </DVPaginator>
-        <div v-if="$slots.footer" class="p-dataview-footer">
+        <div v-if="$slots.footer" class="p-dataview-footer" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
     </div>
 </template>
+
 <script>
-import { ObjectUtils } from 'primevue/utils';
+import BaseComponent from 'primevue/basecomponent';
 import Paginator from 'primevue/paginator';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'DataView',
+    extends: BaseComponent,
     emits: ['update:first', 'update:rows', 'page'],
     props: {
         value: {

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -10,6 +10,66 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DataViewLayoutOptionsPassThroughOptionType = DataViewLayoutOptionsPassThroughAttributes | ((options: DataViewLayoutOptionsPassThroughMethodOptions) => DataViewLayoutOptionsPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewLayoutOptionsPassThroughMethodOptions {
+    props: DataViewLayoutOptionsProps;
+    state: DataViewLayoutOptionsState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewLayoutOptionsProps.pt}
+ */
+export interface DataViewLayoutOptionsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list button's DOM element.
+     */
+    listButton?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list icon's DOM element.
+     */
+    listIcon?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the grid button's DOM element.
+     */
+    gridButton?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the grid icon's DOM element.
+     */
+    gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DataViewLayoutOptionsPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in DataViewLayoutOptions component.
+ */
+export interface DataViewLayoutOptionsState {
+    /**
+     * Current list button pressed state as a boolean.
+     * @defaultValue false
+     */
+    isListButtonPressed: boolean;
+    /**
+     * Current grid button pressed state as a boolean.
+     * @defaultValue false
+     */
+    isGridButtonPressed: boolean;
+}
+
 /**
  * Defines valid properties in DataViewLayoutOptions component.
  */
@@ -18,6 +78,11 @@ export interface DataViewLayoutOptionsProps {
      * Value of the component.
      */
     modelValue?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataViewLayoutOptionsPassThroughOptions}
+     */
+    pt?: DataViewLayoutOptionsPassThroughOptions;
 }
 
 /**

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue

@@ -1,24 +1,26 @@
 <template>
-    <div class="p-dataview-layout-options p-selectbutton p-buttonset" role="group">
+    <div class="p-dataview-layout-options p-selectbutton p-buttonset" role="group" v-bind="ptm('root')">
-        <button :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed">
+        <button :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed" v-bind="ptm('listButton')">
             <slot name="listicon">
-                <BarsIcon />
+                <BarsIcon v-bind="ptm('listIcon')" />
             </slot>
         </button>
-        <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed">
+        <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed" v-bind="ptm('gridButton')">
             <slot name="gridicon">
-                <ThLargeIcon />
+                <ThLargeIcon v-bind="ptm('gridIcon')" />
             </slot>
         </button>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import BarsIcon from 'primevue/icons/bars';
 import ThLargeIcon from 'primevue/icons/thlarge';
 
 export default {
     name: 'DataViewLayoutOptions',
+    extends: BaseComponent,
     emits: ['update:modelValue'],
     props: {
         modelValue: String