Refactor #3965 - context added Tree & CascadeSelect

components/lib/cascadeselect/BaseCascadeSelect.vue

@@ -122,13 +122,13 @@ const classes = {
     wrapper: 'p-cascadeselect-items-wrapper',
     hiddenSelectedMessage: 'p-hidden-accessible',
     list: 'p-cascadeselect-panel p-cascadeselect-items',
-    item: ({ cascadesub, processedOption }) => [
+    item: ({ context, processedOption }) => [
         'p-cascadeselect-item',
         {
-            'p-cascadeselect-item-group': cascadesub.isOptionGroup(processedOption),
-            'p-cascadeselect-item-active p-highlight': cascadesub.isOptionActive(processedOption),
-            'p-focus': cascadesub.isOptionFocused(processedOption),
-            'p-disabled': cascadesub.isOptionDisabled(processedOption)
+            'p-cascadeselect-item-group': context.isOptionGroup(processedOption),
+            'p-cascadeselect-item-active p-highlight': context.isOptionActive(processedOption),
+            'p-focus': context.isOptionFocused(processedOption),
+            'p-disabled': context.isOptionDisabled(processedOption)
         }
     ],
     content: 'p-cascadeselect-item-content',

components/lib/cascadeselect/CascadeSelectSub.vue

@@ -133,7 +133,7 @@ export default {
         getCXOptions(key, params) {
             return this.cx(key, {
                 ...params,
-                cascadesub: this
+                context: this
             });
         }
     },

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: ({ treenode }) => ['p-treenode', { 'p-treenode-leaf': treenode.leaf }],
-    content: ({ treenode }) => [
-        'p-treenode-content',
-        treenode.node.styleClass,
+    node: ({ context }) => ['p-context', { 'p-context-leaf': context.leaf }],
+    content: ({ context }) => [
+        'p-context-content',
+        context.node.styleClass,
         {
-            'p-treenode-selectable': treenode.selectable,
-            'p-highlight': treenode.checkboxMode ? treenode.checked : treenode.selected
+            'p-context-selectable': context.selectable,
+            'p-highlight': context.checkboxMode ? context.checked : context.selected
         }
     ],
     toggler: 'p-tree-toggler p-link',
     togglerIcon: 'p-tree-toggler-icon',
     checkboxContainer: 'p-checkbox p-component',
-    checkbox: ({ treenode }) => [
+    checkbox: ({ context }) => [
         'p-checkbox-box',
         {
-            'p-highlight': treenode.checked,
-            'p-indeterminate': treenode.partialChecked
+            'p-highlight': context.checked,
+            'p-indeterminate': context.partialChecked
         }
     ],
     checkboxIcon: 'p-checkbox-icon',
-    nodeIcon: ({ treenode }) => ['p-treenode-icon', treenode.node.icon],
-    label: 'p-treenode-label',
-    subgroup: 'p-treenode-children'
+    nodeIcon: ({ context }) => ['p-context-icon', context.node.icon],
+    label: 'p-context-label',
+    subgroup: 'p-context-children'
 };
 
 const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });

components/lib/tree/TreeNode.vue

@@ -122,7 +122,7 @@ export default {
         },
         getCXOptions(key) {
             return this.cx(key, {
-                treenode: this
+                context: this
             });
         },
         onClick(event) {