From b82bf5295a54a7db260f8155f063dafba2027aa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Wed, 10 May 2023 01:39:10 +0300 Subject: [PATCH] Refactor #3924 - For DataView & DataViewLayoutOptions --- api-generator/components/dataview.js | 6 ++ .../components/dataviewlayoutoptions.js | 6 ++ components/lib/config/PrimeVue.d.ts | 4 ++ components/lib/dataview/DataView.d.ts | 72 +++++++++++++++++++ components/lib/dataview/DataView.vue | 21 +++--- .../DataViewLayoutOptions.d.ts | 65 +++++++++++++++++ .../DataViewLayoutOptions.vue | 12 ++-- 7 files changed, 173 insertions(+), 13 deletions(-) diff --git a/api-generator/components/dataview.js b/api-generator/components/dataview.js index 039575f63..184e80c3e 100644 --- a/api-generator/components/dataview.js +++ b/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.' } ]; diff --git a/api-generator/components/dataviewlayoutoptions.js b/api-generator/components/dataviewlayoutoptions.js index e34ae325f..a1feb110b 100644 --- a/api-generator/components/dataviewlayoutoptions.js +++ b/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.' } ]; diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index 999df85bb..76b85fa01 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/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; diff --git a/components/lib/dataview/DataView.d.ts b/components/lib/dataview/DataView.d.ts index cb1399d71..175abaa68 100755 --- a/components/lib/dataview/DataView.d.ts +++ b/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; } /** diff --git a/components/lib/dataview/DataView.vue b/components/lib/dataview/DataView.vue index 1f243213e..be23d6066 100755 --- a/components/lib/dataview/DataView.vue +++ b/components/lib/dataview/DataView.vue @@ -1,6 +1,6 @@ +