primevue 3.16.2 → 3.18.0

package/treetable/TreeTableRow.vue

@@ -1,26 +1,48 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
-        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-            <TTBodyCell v-if="!columnProp(col, 'hidden')" :column="col" :node="node"
-                :level="level" :leaf="leaf" :indentation="indentation" :expanded="expanded" :selectionMode="selectionMode"
-                :checked="checked" :partialChecked="partialChecked"
-                @node-toggle="$emit('node-toggle', $event)" @checkbox-toggle="toggleCheckbox"></TTBodyCell>
+        <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+            <TTBodyCell
+                v-if="!columnProp(col, 'hidden')"
+                :column="col"
+                :node="node"
+                :level="level"
+                :leaf="leaf"
+                :indentation="indentation"
+                :expanded="expanded"
+                :selectionMode="selectionMode"
+                :checked="checked"
+                :partialChecked="partialChecked"
+                @node-toggle="$emit('node-toggle', $event)"
+                @checkbox-toggle="toggleCheckbox"
+            ></TTBodyCell>
         </template>
     </tr>
     <template v-if="expanded && node.children && node.children.length">
-        <TreeTableRow v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node"  :level="level + 1"
-            :expandedKeys="expandedKeys" :selectionMode="selectionMode" :selectionKeys="selectionKeys" :indentation="indentation"
-            @node-toggle="$emit('node-toggle', $event)" @node-click="$emit('node-click', $event)" @checkbox-change="onCheckboxChange" />
+        <TreeTableRow
+            v-for="childNode of node.children"
+            :key="childNode.key"
+            :columns="columns"
+            :node="childNode"
+            :parentNode="node"
+            :level="level + 1"
+            :expandedKeys="expandedKeys"
+            :selectionMode="selectionMode"
+            :selectionKeys="selectionKeys"
+            :indentation="indentation"
+            @node-toggle="$emit('node-toggle', $event)"
+            @node-click="$emit('node-click', $event)"
+            @checkbox-change="onCheckboxChange"
+        />
     </template>
 </template>
 
 <script>
-import {DomHandler, ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
     name: 'TreeTableRow',
-    emits: ['node-click', 'node-toggle', 'checkbox-change','nodeClick', 'nodeToggle', 'checkboxChange'],
+    emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
     props: {
         node: {
             type: null,
@@ -64,16 +86,15 @@ export default {
             this.$emit('node-toggle', this.node);
         },
         onClick(event) {
-            if (DomHandler.isClickable(event.target) ||
-                DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
+            if (DomHandler.isClickable(event.target) || DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
                 return;
             }
 
             this.$emit('node-click', {
-                    originalEvent: event,
-                    nodeTouched: this.nodeTouched,
-                    node: this.node
-                });
+                originalEvent: event,
+                nodeTouched: this.nodeTouched,
+                node: this.node
+            });
 
             this.nodeTouched = false;
         },
@@ -88,6 +109,7 @@ export default {
                     //down arrow
                     case 40: {
                         const nextRow = rowElement.nextElementSibling;
+
                         if (nextRow) {
                             nextRow.focus();
                         }
@@ -99,6 +121,7 @@ export default {
                     //up arrow
                     case 38: {
                         const previousRow = rowElement.previousElementSibling;
+
                         if (previousRow) {
                             previousRow.focus();
                         }
@@ -109,11 +132,13 @@ export default {
 
                     //right-left arrows
                     case 37:
+
                     case 39: {
                         if (!this.leaf) {
                             this.$emit('node-toggle', this.node);
                             event.preventDefault();
                         }
+
                         break;
                     }
 
@@ -126,12 +151,12 @@ export default {
 
                     default:
                         //no op
-                    break;
+                        break;
                 }
             }
         },
         toggleCheckbox() {
-            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+            let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
             const _check = !this.checked;
 
             this.propagateDown(this.node, _check, _selectionKeys);
@@ -143,10 +168,8 @@ export default {
             });
         },
         propagateDown(node, check, selectionKeys) {
-            if (check)
-                selectionKeys[node.key] = {checked: true, partialChecked: false};
-            else
-                delete selectionKeys[node.key];
+            if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
+            else delete selectionKeys[node.key];
 
             if (node.children && node.children.length) {
                 for (let child of node.children) {
@@ -156,29 +179,24 @@ export default {
         },
         propagateUp(event) {
             let check = event.check;
-            let _selectionKeys = {...event.selectionKeys};
+            let _selectionKeys = { ...event.selectionKeys };
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
-            for(let child of this.node.children) {
-                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
-                    checkedChildCount++;
-                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
-                    childPartialSelected = true;
+            for (let child of this.node.children) {
+                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
+                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
             }
 
-            if(check && checkedChildCount === this.node.children.length) {
-                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
-            }
-            else {
+            if (check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };
+            } else {
                 if (!check) {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
-                else
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: false};
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
+                else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
             }
 
             this.$emit('checkbox-change', {
@@ -189,29 +207,24 @@ export default {
         },
         onCheckboxChange(event) {
             let check = event.check;
-            let _selectionKeys = {...event.selectionKeys};
+            let _selectionKeys = { ...event.selectionKeys };
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
-            for(let child of this.node.children) {
-                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
-                    checkedChildCount++;
-                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
-                    childPartialSelected = true;
+            for (let child of this.node.children) {
+                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
+                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
             }
 
-            if(check && checkedChildCount === this.node.children.length) {
-                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
-            }
-            else {
+            if (check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };
+            } else {
                 if (!check) {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
-                else
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: false};
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
+                else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
             }
 
             this.$emit('checkbox-change', {
@@ -223,9 +236,12 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.node.styleClass, {
-                'p-highlight': this.selected
-            }]
+            return [
+                this.node.styleClass,
+                {
+                    'p-highlight': this.selected
+                }
+            ];
         },
         hasChildren() {
             return this.node.children && this.node.children.length > 0;
@@ -237,20 +253,20 @@ export default {
             return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
         },
         selected() {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[this.node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
         },
         childLevel() {
             return this.level + 1;
         },
         checked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
         },
         partialChecked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
         }
     },
     components: {
-        'TTBodyCell': BodyCell
+        TTBodyCell: BodyCell
     }
-}
+};
 </script>