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> <template>
<button :class="buttonClass" v-on="$listeners"> <button :class="buttonClass" v-on="$listeners">
<span v-if="icon" :class="iconClass"></span> <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> </button>
</template> </template>

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

@ -16,13 +16,13 @@
</template> </template>
<template v-else-if="editMode === 'row' && column.rowEditor"> <template v-else-if="editMode === 'row' && column.rowEditor">
<button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button"> <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>
<button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="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>
<button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="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> </button>
</template> </template>
<template v-else>{{resolveFieldData()}}</template> <template v-else>{{resolveFieldData()}}</template>

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

@ -636,13 +636,7 @@ export default {
}, },
onRowClick(e) { onRowClick(e) {
const event = e.originalEvent; const event = e.originalEvent;
const target = event.target; if (DomHandler.isClickable(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'))) {
return; return;
} }

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

@ -295,11 +295,11 @@ export default {
}, },
rowTogglerIcon(rowData) { rowTogglerIcon(rowData) {
const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon; 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) { rowGroupTogglerIcon(rowData) {
const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon; 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) { isGrouped(column) {
if (this.groupRowsBy) { if (this.groupRowsBy) {

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

@ -8,7 +8,7 @@
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)" @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)"> :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" /> <DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span> <span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></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"> <div class="p-dataview-layout-options p-selectbutton p-buttonset">
<button :class="buttonListClass" @click="changeLayout('list')" type="button"> <button :class="buttonListClass" @click="changeLayout('list')" type="button">
<i class="pi pi-bars"></i> <i class="pi pi-bars"></i>
<span class="p-button-text p-c">&nbsp;</span> <span class="p-button-text ">&nbsp;</span>
</button> </button>
<button :class="buttonGridClass" @click="changeLayout('grid')" type="button"> <button :class="buttonGridClass" @click="changeLayout('grid')" type="button">
<i class="pi pi-th-large"></i> <i class="pi pi-th-large"></i>
<span class="p-button-text p-c">&nbsp;</span> <span class="p-button-text ">&nbsp;</span>
</button> </button>
</div> </div>
</template> </template>

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

@ -13,7 +13,7 @@
</label> </label>
<i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i> <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"> <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> </div>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible"> <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"> <span icon="pi pi-plus" :class="advancedChooseButtonClass">
<input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur" <input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur"
:multiple="multiple" :accept="accept" :disabled="disabled" /> :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-icon p-button-icon-left pi pi-fw pi-plus"></span>
<span class="p-button-text p-clickable">{{chooseLabel}}</span> <span class="p-button-text">{{chooseLabel}}</span>
</span> </span>
<FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" /> <FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" />
<FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" /> <FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" />
@ -33,7 +33,7 @@
</div> </div>
<span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic"> <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic">
<span :class="basicChooseButtonIconClass"></span> <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" /> <input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
</span> </span>
</template> </template>

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

@ -12,7 +12,7 @@
</label> </label>
</div> </div>
<div class="p-multiselect-trigger"> <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> </div>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-multiselect-panel p-component" v-if="overlayVisible"> <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" :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)}]"> :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"> <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> </slot>
</div> </div>
</div> </div>

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

@ -1,7 +1,7 @@
<template> <template>
<div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-labelledby="ariaLabelledBy" :aria-checked="value" :tabindex="$attrs.disabled ? null : '0'"> <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 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> </div>
</template> </template>

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

@ -24,7 +24,7 @@
<tr> <tr>
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)" <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)"> :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" /> <TTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span> <span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></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); this.$emit('node-toggle', this.node);
}, },
onClick(event) { onClick(event) {
let targetNode = event.target.nodeName; if (DomHandler.isClickable(event.target) ||
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')) {
|| DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
return; return;
} }

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

@ -416,4 +416,14 @@ export default class DomHandler {
return visibleFocusableElements; 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')
);
}
} }