Refactor #3965 - For Tree

components/lib/tree/BaseTree.vue

@@ -102,29 +102,29 @@ const classes = {
     searchIcon: 'p-tree-filter-icon',
     wrapper: 'p-tree-wrapper',
     container: 'p-tree-container',
-    node: ({ context }) => ['p-context', { 'p-context-leaf': context.leaf }],
+    node: ({ instance }) => ['p-treenode', { 'p-treenode-leaf': instance.leaf }],
-    content: ({ context }) => [
+    content: ({ instance }) => [
-        'p-context-content',
+        'p-treenode-content',
-        context.node.styleClass,
+        instance.node.styleClass,
         {
-            'p-context-selectable': context.selectable,
+            'p-treenode-selectable': instance.selectable,
-            'p-highlight': context.checkboxMode ? context.checked : context.selected
+            'p-highlight': instance.checkboxMode ? instance.checked : instance.selected
         }
     ],
     toggler: 'p-tree-toggler p-link',
     togglerIcon: 'p-tree-toggler-icon',
     checkboxContainer: 'p-checkbox p-component',
-    checkbox: ({ context }) => [
+    checkbox: ({ instance }) => [
         'p-checkbox-box',
         {
-            'p-highlight': context.checked,
+            'p-highlight': instance.checked,
-            'p-indeterminate': context.partialChecked
+            'p-indeterminate': instance.partialChecked
         }
     ],
     checkboxIcon: 'p-checkbox-icon',
-    nodeIcon: ({ context }) => ['p-context-icon', context.node.icon],
+    nodeIcon: ({ instance }) => ['p-treenode-icon', instance.node.icon],
-    label: 'p-context-label',
+    label: 'p-treenode-label',
-    subgroup: 'p-context-children'
+    subgroup: 'p-treenode-children'
 };
 
 const { load: loadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });

components/lib/tree/TreeNode.vue

@@ -1,7 +1,7 @@
 <template>
     <li
         ref="currentNode"
-        :class="getCXOptions('node')"
+        :class="cx('node')"
         role="treeitem"
         :aria-label="label(node)"
         :aria-selected="ariaSelected"
@@ -15,19 +15,19 @@
         v-bind="level === 1 ? getPTOptions('node') : ptm('subgroup')"
         data-pc-section="treeitem"
     >
-        <div :class="getCXOptions('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
+        <div :class="cx('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
             <button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
                 <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
                 <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
                 <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
             </button>
             <div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
-                <div :class="getCXOptions('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')" :data-p-checked="checked" :data-p-partialchecked="partialchecked">
+                <div :class="cx('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')" :data-p-checked="checked" :data-p-partialchecked="partialchecked">
                     <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxIcon')" />
                     <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxIcon')" v-bind="getPTOptions('checkboxIcon')" />
                 </div>
             </div>
-            <span :class="getCXOptions('nodeIcon')" v-bind="getPTOptions('nodeIcon')"></span>
+            <span :class="cx('nodeIcon')" v-bind="getPTOptions('nodeIcon')"></span>
             <span :class="cx('label')" v-bind="getPTOptions('label')">
                 <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
                 <template v-else>{{ label(node) }}</template>
@@ -120,11 +120,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key) {
-            return this.cx(key, {
-                context: this
-            });
-        },
         onClick(event) {
             if (this.toggleClicked || DomHandler.getAttribute(event.target, '[data-pc-section="toggler"]') || DomHandler.getAttribute(event.target.parentElement, '[data-pc-section="toggler"]')) {
                 this.toggleClicked = false;
@@ -390,7 +385,7 @@ export default {
         getParentNodeElement(nodeElement) {
             const parentNodeElement = nodeElement.parentElement.parentElement;
 
-            return DomHandler.getAttribute(parentNodeElement, '[data-pc-section="treeitem"]') ? parentNodeElement : null;
+            return DomHandler.getAttribute(parentNodeElement, 'data-pc-section') === 'treeitem' ? parentNodeElement : null;
         },
         focusNode(element) {
             element.focus();