From 413fb026d6bc006c0b86a09b7e186541cfea1bd4 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 11:07:14 +0300 Subject: [PATCH] Refactor #3924 - For OrganizationChart --- api-generator/components/organizationchart.js | 6 + components/lib/config/PrimeVue.d.ts | 2 + .../organizationchart/OrganizationChart.d.ts | 129 ++++++++++++++++++ .../organizationchart/OrganizationChart.vue | 16 ++- .../OrganizationChartNode.vue | 53 ++++--- 5 files changed, 188 insertions(+), 18 deletions(-) diff --git a/api-generator/components/organizationchart.js b/api-generator/components/organizationchart.js index 244a0b017..abd033fa6 100644 --- a/api-generator/components/organizationchart.js +++ b/api-generator/components/organizationchart.js @@ -28,6 +28,12 @@ const OrganizationChartProps = [ type: 'object', default: 'null', description: 'A map instance of key-value pairs to represented the collapsed nodes.' + }, + { + 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 dfe69b8b5..b3f8cabf3 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -46,6 +46,7 @@ import { MenubarPassThroughOptions } from '../menubar'; import { MessagePassThroughOptions } from '../message'; import { MultiSelectPassThroughOptions } from '../multiselect'; import { OrderListPassThroughOptions } from '../orderlist'; +import { OrganizationChartPassThroughOptions } from '../organizationchart'; import { OverlayPanelPassThroughOptions } from '../overlaypanel'; import { PaginatorPassThroughOptions } from '../paginator'; import { PanelPassThroughOptions } from '../panel'; @@ -142,6 +143,7 @@ interface PrimeVuePTOptions { message?: MessagePassThroughOptions; multiselect?: MultiSelectPassThroughOptions; orderlist?: OrderListPassThroughOptions; + organizationchart?: OrganizationChartPassThroughOptions; overlaypanel?: OverlayPanelPassThroughOptions; paginator?: PaginatorPassThroughOptions; panel?: PanelPassThroughOptions; diff --git a/components/lib/organizationchart/OrganizationChart.d.ts b/components/lib/organizationchart/OrganizationChart.d.ts index 69f002836..5196bb04a 100755 --- a/components/lib/organizationchart/OrganizationChart.d.ts +++ b/components/lib/organizationchart/OrganizationChart.d.ts @@ -10,6 +10,17 @@ import { VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type OrganizationChartPassThroughOptionType = OrganizationChartPassThroughAttributes | ((options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface OrganizationChartPassThroughMethodOptions { + props: OrganizationChartProps; + state: OrganizationChartState; + context: OrganizationChartContext; +} + /** * Defines valid properties in OrganizationChartNode. */ @@ -64,6 +75,119 @@ export interface OrganizationChartCollapsedKeys { [key: string]: any; } +/** + * Custom passthrough(pt) options. + * @see {@link OrganizationChartProps.pt} + */ +export interface OrganizationChartPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the table's DOM element. + */ + table?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the body's DOM element. + */ + body?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the row' DOM element. + */ + row?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the cell's DOM element. + */ + cell?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the node's DOM element. + */ + node?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the nodeToggler's DOM element. + */ + nodeToggler?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the nodeTogglerIcon's DOM element. + */ + nodeTogglerIcon?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the lines's DOM element. + */ + lines?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the lineCell's DOM element. + */ + lineCell?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the lineDown's DOM element. + */ + lineDown?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the nodes's DOM element. + */ + nodes?: OrganizationChartPassThroughOptionType; + /** + * Uses to pass attributes to the nodeCell's DOM element. + */ + nodeCell?: OrganizationChartPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface OrganizationChartPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in OrganizationChart component. + */ +export interface OrganizationChartState { + /** + * Current collapsed keys' state. + * @defaultValue false + */ + d_collapsedKeys: OrganizationChartCollapsedKeys; +} + +/** + * Defines current options in OrganizationChart component. + */ +export interface OrganizationChartContext { + /** + * Current focus expanded of the node as a boolean. + * @defaultValue false + */ + expanded: boolean; + /** + * Current selectable state of the node as a boolean. + * @defaultValue false + */ + selectable: boolean; + /** + * Current selection state of the node as a boolean. + * @defaultValue false + */ + selected: boolean; + /** + * Current toggleable state of the node as a boolean. + * @defaultValue false + */ + toggleable: boolean; + /** + * Current active state of the node as a boolean. + * @defaultValue false + */ + active: boolean; + /** + * Current being top line state of the node as a boolean. + * @defaultValue false + */ + lineTop: boolean; +} + /** * Defines valid properties in OrganizationChart component. */ @@ -89,6 +213,11 @@ export interface OrganizationChartProps { * @defaultValue false */ collapsible?: boolean; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {OrganizationChartPassThroughOptions} + */ + pt?: OrganizationChartPassThroughOptions; } /** diff --git a/components/lib/organizationchart/OrganizationChart.vue b/components/lib/organizationchart/OrganizationChart.vue index 3b23b0122..2393b0673 100755 --- a/components/lib/organizationchart/OrganizationChart.vue +++ b/components/lib/organizationchart/OrganizationChart.vue @@ -1,14 +1,26 @@