Refactor #3924 - For OrganizationChart

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.'
     }
 ];
 

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;

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;
 }
 
 /**

components/lib/organizationchart/OrganizationChart.vue

@@ -1,14 +1,26 @@
 <template>
-    <div class="p-organizationchart p-component">
+    <div class="p-organizationchart p-component" v-bind="ptm('root')">
-        <OrganizationChartNode :node="value" :templates="$slots" @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible" @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
+        <OrganizationChartNode
+            :node="value"
+            :templates="$slots"
+            @node-toggle="onNodeToggle"
+            :collapsedKeys="d_collapsedKeys"
+            :collapsible="collapsible"
+            @node-click="onNodeClick"
+            :selectionMode="selectionMode"
+            :selectionKeys="selectionKeys"
+            :pt="pt"
+        />
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OrganizationChartNode from './OrganizationChartNode.vue';
 
 export default {
     name: 'OrganizationChart',
+    extends: BaseComponent,
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
     props: {
         value: {

components/lib/organizationchart/OrganizationChartNode.vue

@@ -1,37 +1,37 @@
 <template>
-    <table class="p-organizationchart-table">
+    <table class="p-organizationchart-table" v-bind="ptm('table')">
-        <tbody>
+        <tbody v-bind="ptm('body')">
-            <tr v-if="node">
+            <tr v-if="node" v-bind="ptm('row')">
-                <td :colspan="colspan">
+                <td :colspan="colspan" v-bind="ptm('cell')">
-                    <div :class="nodeContentClass" @click="onNodeClick">
+                    <div :class="nodeContentClass" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
-                        <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
+                        <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
                             <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
-                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" />
+                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" v-bind="getPTOptions('nodeTogglerIcon')" />
                         </a>
                     </div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines">
+            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
                 <td :colspan="colspan">
-                    <div class="p-organizationchart-line-down"></div>
+                    <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines">
+            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
                 <template v-if="node.children && node.children.length === 1">
-                    <td :colspan="colspan">
+                    <td :colspan="colspan" v-bind="ptm('lineCell')">
-                        <div class="p-organizationchart-line-down"></div>
+                        <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
                     <template v-for="(child, i) of node.children" :key="child.key">
-                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }">&nbsp;</td>
+                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
-                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }">&nbsp;</td>
+                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
                     </template>
                 </template>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-nodes">
+            <tr :style="childStyle" class="p-organizationchart-nodes" v-bind="ptm('nodes')">
-                <td v-for="child of node.children" :key="child.key" colspan="2">
+                <td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
                     <OrganizationChartNode
                         :node="child"
                         :templates="templates"
@@ -41,6 +41,7 @@
                         :selectionMode="selectionMode"
                         :selectionKeys="selectionKeys"
                         @node-click="onChildNodeClick"
+                        :pt="pt"
                     />
                 </td>
             </tr>
@@ -49,12 +50,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'OrganizationChartNode',
+    extends: BaseComponent,
     emits: ['node-click', 'node-toggle'],
     props: {
         node: {
@@ -83,6 +86,24 @@ export default {
         }
     },
     methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    expanded: this.expanded,
+                    selectable: this.selectable,
+                    selected: this.selected,
+                    toggleable: this.toggleable,
+                    active: this.selected
+                }
+            });
+        },
+        getNodeOptions(lineTop, key) {
+            return this.ptm(key, {
+                context: {
+                    lineTop
+                }
+            });
+        },
         onNodeClick(event) {
             if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
                 return;