vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Cleanup p-clickable and p-c

pull/310/head
cagataycivici 2020-05-02 12:19:17 +03:00
parent 4545d87e75
commit 306e7b573d
14 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/button/Button.vue
View File

@ -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>

6
src/components/datatable/BodyCell.vue
View File

@ -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>

8
src/components/datatable/DataTable.vue
View File

@ -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;
}

4
src/components/datatable/TableBody.vue
View File

@ -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) {

2
src/components/datatable/TableHeader.vue
View File

@ -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>

4
src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
View File

@ -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>

2
src/components/dropdown/Dropdown.vue
View File

@ -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">

6
src/components/fileupload/FileUpload.vue
View File

@ -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>

2
src/components/multiselect/MultiSelect.vue
View File

@ -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">

2
src/components/selectbutton/SelectButton.vue
View File

@ -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>

2
src/components/togglebutton/ToggleButton.vue
View File

@ -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>

2
src/components/treetable/TreeTable.vue
View File

@ -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>

5
src/components/treetable/TreeTableRow.vue
View File

@ -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;
}

10
src/components/utils/DomHandler.js
View File

@ -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')
);
}
}