From 306e7b573d8e5f0527b32b885c977273b09c44a4 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 2 May 2020 12:19:17 +0300
Subject: [PATCH] Cleanup p-clickable and p-c

---
 src/components/button/Button.vue                       |  2 +-
 src/components/datatable/BodyCell.vue                  |  6 +++---
 src/components/datatable/DataTable.vue                 |  8 +-------
 src/components/datatable/TableBody.vue                 |  4 ++--
 src/components/datatable/TableHeader.vue               |  2 +-
 .../dataviewlayoutoptions/DataViewLayoutOptions.vue    |  4 ++--
 src/components/dropdown/Dropdown.vue                   |  2 +-
 src/components/fileupload/FileUpload.vue               |  6 +++---
 src/components/multiselect/MultiSelect.vue             |  2 +-
 src/components/selectbutton/SelectButton.vue           |  2 +-
 src/components/togglebutton/ToggleButton.vue           |  2 +-
 src/components/treetable/TreeTable.vue                 |  2 +-
 src/components/treetable/TreeTableRow.vue              |  5 ++---
 src/components/utils/DomHandler.js                     | 10 ++++++++++
 14 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index b86d6b61d..7610a915a 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -1,7 +1,7 @@
 <template>
     <button :class="buttonClass" v-on="$listeners">
         <span v-if="icon" :class="iconClass"></span>
-        <span class="p-button-text p-c">{{label||'&nbsp;'}}</span>
+        <span class="p-button-text ">{{label||'&nbsp;'}}</span>
     </button>
 </template>
 
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 866719879..179e22f42 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -16,13 +16,13 @@
         </template>
         <template v-else-if="editMode === 'row' && column.rowEditor">
             <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button">
-                <span class="p-row-editor-init-icon pi pi-fw pi-pencil p-clickable"></span>
+                <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
             </button>
             <button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="button">
-                <span class="p-row-editor-save-icon pi pi-fw pi-check p-clickable"></span>
+                <span class="p-row-editor-save-icon pi pi-fw pi-check"></span>
             </button>
             <button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="button">
-                <span class="p-row-editor-cancel-icon pi pi-fw pi-times p-clickable"></span>
+                <span class="p-row-editor-cancel-icon pi pi-fw pi-times"></span>
             </button>
         </template>
         <template v-else>{{resolveFieldData()}}</template>
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index c0dcf57f1..6052f3553 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -636,13 +636,7 @@ export default {
         },
         onRowClick(e) {
             const event = e.originalEvent;
-            const target = event.target;
-            const targetNode = target.nodeName;
-            const parentNode = target.parentElement && target.parentElement.nodeName;
-
-            if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' ||
-                parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' ||
-                (DomHandler.hasClass(target, 'p-clickable'))) {
+            if (DomHandler.isClickable(event.target)) {
                 return;
             }
 
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index c3d170309..f34b9cc23 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -295,11 +295,11 @@ export default {
         },
         rowTogglerIcon(rowData) {
             const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-            return ['p-row-toggler-icon pi p-clickable', icon];
+            return ['p-row-toggler-icon pi', icon];
         },
         rowGroupTogglerIcon(rowData) {
             const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-            return ['p-row-toggler-icon pi p-clickable', icon];
+            return ['p-row-toggler-icon pi', icon];
         },
         isGrouped(column) {
             if (this.groupRowsBy) {
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 38c268895..c61a6dbce 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -8,7 +8,7 @@
                         @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
                         @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
                         :colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
-                        <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
+                        <span class="p-column-resizer" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
                         <DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                         <span class="p-column-title" v-if="col.header">{{col.header}}</span>
                         <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
diff --git a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
index 9fbbf561f..7defbb7cc 100755
--- a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
@@ -2,11 +2,11 @@
 	<div class="p-dataview-layout-options p-selectbutton p-buttonset">
 		<button :class="buttonListClass" @click="changeLayout('list')" type="button">
 			<i class="pi pi-bars"></i>
-			<span class="p-button-text p-c">&nbsp;</span>
+			<span class="p-button-text ">&nbsp;</span>
 		</button>
 		<button :class="buttonGridClass" @click="changeLayout('grid')" type="button">
 			<i class="pi pi-th-large"></i>
-			<span class="p-button-text p-c">&nbsp;</span>
+			<span class="p-button-text ">&nbsp;</span>
 		</button>
 	</div>
 </template>
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index c1e11089d..e0ae935f5 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -13,7 +13,7 @@
         </label>
         <i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
         <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
-            <span class="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span>
+            <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
         </div>
         <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index b764432e5..184e273f4 100755
--- a/src/components/fileupload/FileUpload.vue
+++ b/src/components/fileupload/FileUpload.vue
@@ -4,8 +4,8 @@
             <span icon="pi pi-plus" :class="advancedChooseButtonClass">
                 <input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur"
                     :multiple="multiple" :accept="accept" :disabled="disabled" />
-                <span class="p-button-icon p-button-icon-left p-clickable pi pi-fw pi-plus"></span>
-                <span class="p-button-text p-clickable">{{chooseLabel}}</span>
+                <span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
+                <span class="p-button-text">{{chooseLabel}}</span>
             </span>
             <FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" />
             <FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" />
@@ -33,7 +33,7 @@
     </div>
     <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic">
         <span :class="basicChooseButtonIconClass"></span>
-        <span class="p-button-text p-clickable">{{basicChooseButtonLabel}}</span>
+        <span class="p-button-text">{{basicChooseButtonLabel}}</span>
         <input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
     </span>
 </template>
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index fd280798c..c1db38e8b 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -12,7 +12,7 @@
             </label>
         </div>
         <div class="p-multiselect-trigger">
-            <span class="p-multiselect-trigger-icon pi pi-chevron-down p-c"></span>
+            <span class="p-multiselect-trigger-icon pi pi-chevron-down "></span>
         </div>
         <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-multiselect-panel p-component" v-if="overlayVisible">
diff --git a/src/components/selectbutton/SelectButton.vue b/src/components/selectbutton/SelectButton.vue
index 4130592ac..dfeb44964 100755
--- a/src/components/selectbutton/SelectButton.vue
+++ b/src/components/selectbutton/SelectButton.vue
@@ -5,7 +5,7 @@
             :tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event, i)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy"
             :class="['p-button p-component p-button-text-only', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option), 'p-focus': (i === focusedIndex)}]">
             <slot name="option" :option="option" :index="i">
-                <span class="p-button-text p-c">{{getOptionLabel(option)}}</span>
+                <span class="p-button-text ">{{getOptionLabel(option)}}</span>
             </slot>
         </div>
     </div>
diff --git a/src/components/togglebutton/ToggleButton.vue b/src/components/togglebutton/ToggleButton.vue
index 51c91a0d4..87bc3b673 100755
--- a/src/components/togglebutton/ToggleButton.vue
+++ b/src/components/togglebutton/ToggleButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-labelledby="ariaLabelledBy" :aria-checked="value" :tabindex="$attrs.disabled ? null : '0'">
         <span v-if="hasIcon" :class="iconClass"></span>
-        <span class="p-button-text p-unselectable-text p-c">{{label}}</span>
+        <span class="p-button-text p-unselectable-text ">{{label}}</span>
     </div>
 </template>
 
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 003c43c32..32edac665 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -24,7 +24,7 @@
                     <tr>
                         <th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
                             :tabindex="col.sortable ? '0' : null"  :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
-                            <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
+                            <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
                             <TTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                             <span class="p-column-title" v-if="col.header">{{col.header}}</span>
                             <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index b33cadfe8..152b43e2b 100755
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -69,9 +69,8 @@ export default {
             this.$emit('node-toggle', this.node);
         },
         onClick(event) {
-            let targetNode = event.target.nodeName;
-            if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable')
-                || 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;
             }
 
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
index d4150e10f..44084e30f 100755
--- a/src/components/utils/DomHandler.js
+++ b/src/components/utils/DomHandler.js
@@ -416,4 +416,14 @@ export default class DomHandler {
 
         return visibleFocusableElements;
     }
+
+    static isClickable(element) {
+        const targetNode = element.nodeName;
+        const parentNode = element.parentElement && element.parentElement.nodeName;
+
+        return (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' ||
+                parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' ||
+                this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button')
+        );
+    }
 }
\ No newline at end of file