primevue 3.29.2 → 3.30.0

package/tree/TreeNode.vue

@@ -1,7 +1,7 @@
 <template>
     <li
         ref="currentNode"
-        :class="containerClass"
+        :class="cx('node')"
         role="treeitem"
         :aria-label="label(node)"
         :aria-selected="ariaSelected"
@@ -12,27 +12,27 @@
         :aria-checked="ariaChecked"
         :tabindex="index === 0 ? 0 : -1"
         @keydown="onKeyDown"
-        v-bind="getPTOptions('node')"
+        v-bind="level === 1 ? getPTOptions('node') : ptm('subgroup')"
     >
-        <div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')">
-            <button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
-                <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
-                <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" v-bind="getPTOptions('togglerIcon')" />
-                <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getPTOptions('togglerIcon')" />
+        <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="p-checkbox p-component" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
-                <div :class="checkboxClass" role="checkbox" v-bind="getPTOptions('checkbox')">
-                    <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
-                    <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" v-bind="getPTOptions('checkboxIcon')" />
+            <div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
+                <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="icon" v-bind="getPTOptions('nodeIcon')"></span>
-            <span class="p-treenode-label" v-bind="getPTOptions('label')">
+            <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>
             </span>
         </div>
-        <ul v-if="hasChildren && expanded" class="p-treenode-children" role="group" v-bind="ptm('subgroup')">
+        <ul v-if="hasChildren && expanded" :class="cx('subgroup')" role="group" v-bind="ptm('subgroup')">
             <TreeNode
                 v-for="childNode of node.children"
                 :key="childNode.key"
@@ -62,6 +62,7 @@ import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'TreeNode',
+    hostName: 'Tree',
     extends: BaseComponent,
     emits: ['node-toggle', 'node-click', 'checkbox-change'],
     props: {
@@ -97,11 +98,7 @@ export default {
     nodeTouched: false,
     toggleClicked: false,
     mounted() {
-        const hasTreeSelectParent = this.$refs.currentNode.closest('.p-treeselect-items-wrapper');
-
-        if (hasTreeSelectParent) {
-            this.setAllNodesTabIndexes();
-        }
+        this.setAllNodesTabIndexes();
     },
     methods: {
         toggle() {
@@ -124,7 +121,7 @@ export default {
             });
         },
         onClick(event) {
-            if (this.toggleClicked || DomHandler.hasClass(event.target, 'p-tree-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-tree-toggler')) {
+            if (this.toggleClicked || DomHandler.getAttribute(event.target, '[data-pc-section="toggler"]') || DomHandler.getAttribute(event.target.parentElement, '[data-pc-section="toggler"]')) {
                 this.toggleClicked = false;
 
                 return;
@@ -188,7 +185,7 @@ export default {
             }
         },
         onArrowDown(event) {
-            const nodeElement = event.target;
+            const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
             const listElement = nodeElement.children[1];
 
             if (listElement) {
@@ -233,7 +230,7 @@ export default {
             });
         },
         onArrowLeft(event) {
-            const togglerElement = DomHandler.findSingle(event.currentTarget, '.p-tree-toggler');
+            const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]');
 
             if (this.level === 0 && !this.expanded) {
                 return false;
@@ -261,7 +258,7 @@ export default {
             this.setAllNodesTabIndexes();
         },
         setAllNodesTabIndexes() {
-            const nodes = DomHandler.find(this.$refs.currentNode.closest('.p-tree-container'), '.p-treenode');
+            const nodes = DomHandler.find(this.$refs.currentNode.closest('[data-pc-section="container"]'), '[role="treeitem"]');
 
             const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
 
@@ -281,7 +278,7 @@ export default {
         },
         setTabIndexForSelectionMode(event, nodeTouched) {
             if (this.selectionMode !== null) {
-                const elements = [...DomHandler.find(this.$refs.currentNode.parentElement, '.p-treenode')];
+                const elements = [...DomHandler.find(this.$refs.currentNode.parentElement, '[role="treeitem"]')];
 
                 event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
 
@@ -388,7 +385,7 @@ export default {
         getParentNodeElement(nodeElement) {
             const parentNodeElement = nodeElement.parentElement.parentElement;
 
-            return DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
+            return DomHandler.getAttribute(parentNodeElement, 'role') === 'treeitem' ? parentNodeElement : null;
         },
         focusNode(element) {
             element.focus();
@@ -397,7 +394,7 @@ export default {
             return this.selectionMode === 'checkbox';
         },
         isSameNode(event) {
-            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-treenode')));
+            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
         }
     },
     computed: {
@@ -416,25 +413,6 @@ export default {
         selected() {
             return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
         },
-        containerClass() {
-            return ['p-treenode', { 'p-treenode-leaf': this.leaf }];
-        },
-        contentClass() {
-            return [
-                'p-treenode-content',
-                this.node.styleClass,
-                {
-                    'p-treenode-selectable': this.selectable,
-                    'p-highlight': this.checkboxMode ? this.checked : this.selected
-                }
-            ];
-        },
-        icon() {
-            return ['p-treenode-icon', this.node.icon];
-        },
-        checkboxClass() {
-            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-indeterminate': this.partialChecked }];
-        },
         checkboxMode() {
             return this.selectionMode === 'checkbox' && this.node.selectable !== false;
         },