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

Naming convention for data-p-* attributes

pull/5806/head
tugcekucukoglu 2024-05-24 14:07:49 +03:00
parent afdbfc9aaf
commit 40f5d1ac90
32 changed files with 50 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/autocomplete/AutoComplete.vue
View File

@ -152,7 +152,7 @@
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
:data-p-highlight="isSelected(option)"
:data-p-selected="isSelected(option)"
:data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
v-bind="getPTOptions(option, getItemOptions, i, 'option')"

4
components/lib/carousel/Carousel.vue
View File

@ -78,7 +78,7 @@
</Button>
</div>
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicatorList'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicatorList')">
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-active="d_page === i">
<button
:class="cx('indicatorButton')"
type="button"
@ -498,7 +498,7 @@ export default {
},
onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);

2
components/lib/cascadeselect/CascadeSelectSub.vue
View File

@ -13,7 +13,7 @@
:aria-posinset="index + 1"
v-bind="getPTOptions(processedOption, index, 'option')"
:data-p-option-group="isOptionGroup(processedOption)"
:data-p-highlight="isOptionActive(processedOption)"
:data-p-active="isOptionActive(processedOption)"
:data-p-focus="isOptionFocused(processedOption)"
:data-p-disabled="isOptionDisabled(processedOption)"
>

2
components/lib/checkbox/Checkbox.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"

2
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -16,7 +16,7 @@
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions('item', processedItem, index)"
:data-p-highlight="isItemActive(processedItem)"
:data-p-active="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>

4
components/lib/datatable/BodyRow.vue
View File

@ -35,8 +35,8 @@
v-bind="getBodyRowPTOptions('bodyRow')"
:data-p-index="rowIndex"
:data-p-selectable-row="selectionMode ? true : false"
:data-p-highlight="selection && isSelected"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
:data-p-selected="selection && isSelected"
:data-p-selected-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
>
<template v-for="(col, i) of columns">
<DTBodyCell

2
components/lib/datatable/DataTable.vue
View File

@ -959,7 +959,7 @@ export default {
const rows = DomHandler.find(body, 'tr[data-p-selectable-row="true"]');
if (event.code === 'Tab' && rows && rows.length > 0) {
const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-highlight="true"]');
const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-selected="true"]');
const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (firstSelectedRow) {

2
components/lib/datatable/HeaderCell.vue
View File

@ -17,7 +17,7 @@
v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()"
:data-p-sorted="isColumnSorted()"
:data-p-filter-column="filterColumn"
:data-p-frozen-column="columnProp('frozen')"
:data-p-reorderable-column="reorderableColumns"

12
components/lib/datepicker/DatePicker.vue
View File

@ -240,7 +240,7 @@
})
"
:data-p-disabled="!date.selectable"
:data-p-highlight="isSelected(date)"
:data-p-selected="isSelected(date)"
data-pc-group-section="tablebodycelllabel"
>
<slot name="date" :date="date">{{ date.day }}</slot>
@ -273,7 +273,7 @@
})
"
:data-p-disabled="!m.selectable"
:data-p-highlight="isMonthSelected(i)"
:data-p-selected="isMonthSelected(i)"
>
{{ m.value }}
<div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
@ -299,7 +299,7 @@
})
"
:data-p-disabled="!y.selectable"
:data-p-highlight="isYearSelected(y.value)"
:data-p-selected="isYearSelected(y.value)"
>
{{ y.value }}
<div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
@ -2487,18 +2487,18 @@ export default {
if (this.currentView === 'month') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-highlight="true"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-selected="true"]');
cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0];
} else if (this.currentView === 'year') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-highlight="true"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-selected="true"]');
cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0];
} else {
cell = DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]');
cell = DomHandler.findSingle(this.overlay, 'span[data-p-selected="true"]');
if (!cell) {
let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');

4
components/lib/galleria/GalleriaItem.vue
View File

@ -26,7 +26,7 @@
@mouseenter="onIndicatorMouseEnter(index)"
@keydown="onIndicatorKeyDown($event, index)"
v-bind="ptm('indicator', getIndicatorPTOptions(index))"
:data-p-highlight="isIndicatorItemActive(index)"
:data-p-active="isIndicatorItemActive(index)"
>
<button v-if="!templates['indicator']" type="button" :tabindex="activeIndex === index ? '0' : '-1'" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
<component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@ -214,7 +214,7 @@ export default {
},
onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);

2
components/lib/listbox/Listbox.vue
View File

@ -87,7 +87,7 @@
@touchend="onOptionTouchEnd()"
@dblclick="onOptionDblClick($event, option)"
v-bind="getPTOptions(option, getItemOptions, i, 'option')"
:data-p-highlight="isSelected(option)"
:data-p-selected="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
>

2
components/lib/megamenu/MegaMenuSub.vue
View File

@ -16,7 +16,7 @@
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'item')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-active="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>

2
components/lib/menubar/MenubarSub.vue
View File

@ -15,7 +15,7 @@
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'item')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-active="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>

6
components/lib/multiselect/MultiSelect.spec.js
View File

@ -49,7 +49,7 @@ describe('MultiSelect.vue', () => {
await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] });
await wrapper.vm.onContainerClick();
expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-highlight']).toBe('true');
expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-selected']).toBe('true');
expect(wrapper.find('.p-multiselect-label').text()).toBe('New York');
});
@ -63,8 +63,8 @@ describe('MultiSelect.vue', () => {
await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]] });
await wrapper.vm.onContainerClick();
expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-highlight']).toBe('true');
expect(wrapper.findAll('li.p-multiselect-item')[1].attributes()['data-p-highlight']).toBe('true');
expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-selected']).toBe('true');
expect(wrapper.findAll('li.p-multiselect-item')[1].attributes()['data-p-selected']).toBe('true');
});
it('should close panel', async () => {

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

@ -148,7 +148,7 @@
@click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'option')"
:data-p-highlight="isSelected(option)"
:data-p-selected="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
>

2
components/lib/orderlist/OrderList.vue
View File

@ -229,7 +229,7 @@ export default {
updateListScroll() {
this.list = DomHandler.findSingle(this.$refs.listbox.$el, '[data-pc-section="list"]');
const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]');
const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-selected="true"]');
if (listItems && listItems.length) {
switch (this.reorderDirection) {

2
components/lib/paginator/PageLinks.vue
View File

@ -10,7 +10,7 @@
:aria-current="pageLink - 1 === page ? 'page' : undefined"
@click="onPageLinkClick($event, pageLink)"
v-bind="getPTOptions(pageLink - 1, 'page')"
:data-p-highlight="pageLink - 1 === page"
:data-p-active="pageLink - 1 === page"
>
{{ pageLink }}
</button>

6
components/lib/panelmenu/PanelMenu.vue
View File

@ -14,7 +14,7 @@
@click="onHeaderClick($event, item)"
@keydown="onHeaderKeyDown($event, item)"
v-bind="getPTOptions('header', item, index)"
:data-p-highlight="isItemActive(item)"
:data-p-active="isItemActive(item)"
:data-p-disabled="isItemDisabled(item)"
>
<div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
@ -164,14 +164,14 @@ export default {
}
},
onHeaderArrowDownKey(event) {
const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null;
const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-active') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
event.preventDefault();
},
onHeaderArrowUpKey(event) {
const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
const rootList = DomHandler.getAttribute(prevHeader, 'data-p-active') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
event.preventDefault();

2
components/lib/picklist/PickList.vue
View File

@ -508,7 +508,7 @@ export default {
this.updateSelection(event);
},
updateListScroll(listElement) {
const listItems = DomHandler.find(listElement, '[data-pc-section="item"][data-p-highlight="true"]');
const listItems = DomHandler.find(listElement, '[data-pc-section="item"][data-p-selected="true"]');
if (listItems && listItems.length) {
switch (this.reorderDirection) {

2
components/lib/radiobutton/RadioButton.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="radio"

2
components/lib/select/Select.vue
View File

@ -139,7 +139,7 @@
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
:data-p-highlight="isSelected(option)"
:data-p-selected="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
v-bind="getPTItemOptions(option, getItemOptions, i, 'option')"

6
components/lib/stepper/Stepper.vue
View File

@ -12,10 +12,9 @@
role="presentation"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'item', index) }"
data-pc-name="stepperpanel"
:data-p-highlight="isStepActive(index)"
:data-p-active="isStepActive(index)"
:data-p-disabled="isItemDisabled(index)"
:data-pc-index="index"
:data-p-active="isStepActive(index)"
>
<slot name="header">
<StepperHeader
@ -77,10 +76,9 @@
:aria-current="isStepActive(index) ? 'step' : undefined"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'panel', index) }"
data-pc-name="stepperpanel"
:data-p-highlight="isStepActive(index)"
:data-p-active="isStepActive(index)"
:data-p-disabled="isItemDisabled(index)"
:data-pc-index="index"
:data-p-active="isStepActive(index)"
>
<div :class="cx('stepper.item', { step, index })" v-bind="getStepPT(step, 'item', index)">
<slot name="header">

2
components/lib/steps/Steps.vue
View File

@ -10,7 +10,7 @@
@click="onItemClick($event, item, index)"
@keydown="onItemKeydown($event, item, index)"
v-bind="getPTOptions('item', item, index)"
:data-p-highlight="isActive(index)"
:data-p-active="isActive(index)"
:data-p-disabled="isItemDisabled(item, index)"
>
<template v-if="!$slots.item">

8
components/lib/tabmenu/TabMenu.vue
View File

@ -10,7 +10,7 @@
@click="onItemClick($event, item, i)"
@keydown="onKeydownItem($event, item, i)"
v-bind="getPTOptions('item', item, i)"
:data-p-highlight="d_activeIndex === i"
:data-p-active="d_activeIndex === i"
:data-p-disabled="disabled(item)"
>
<template v-if="!$slots.item">
@ -183,7 +183,7 @@ export default {
return siblings ? siblings[siblings.length - 1].children[0] : null;
},
findActiveItem() {
const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-active="true"]');
return activeItem ? activeItem.children[0] : null;
},
@ -193,7 +193,7 @@ export default {
focusableItem.focus();
},
onTabKey() {
const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-active="true"]');
const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="itemlink"][tabindex="0"]');
if (focusedItem !== activeItem.children[0]) {
@ -217,7 +217,7 @@ export default {
for (let i = 0; i < tabs.length; i++) {
let tab = tabs[i];
if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
if (DomHandler.getAttribute(tab, 'data-p-active')) {
this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';
this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
inkHighlighted = true;

3
components/lib/tabview/TabView.vue
View File

@ -27,10 +27,9 @@
role="presentation"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'header', index) }"
data-pc-name="tabpanel"
:data-p-highlight="d_activeIndex === index"
:data-p-active="d_activeIndex === index"
:data-p-disabled="getTabProp(tab, 'disabled')"
:data-pc-index="index"
:data-p-active="d_activeIndex === index"
>
<a
:id="getTabHeaderActionId(index)"

2
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -16,7 +16,7 @@
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'item')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-active="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>

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

@ -1,5 +1,5 @@
<template>
<button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
<button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-checked="active" :data-p-disabled="disabled">
<span :class="cx('content')" v-bind="getPTOptions('content')">
<slot>
<slot name="icon" :value="modelValue" :class="cx('icon')">

2
components/lib/toggleswitch/ToggleSwitch.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"

2
components/lib/tree/TreeNode.vue
View File

@ -14,7 +14,7 @@
@keydown="onKeyDown"
v-bind="level === 1 ? getPTOptions('node') : ptm('nodeChildren')"
>
<div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
<div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-selected="checkboxMode ? checked : selected" :data-p-selectable="selectable">
<button v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('nodeToggleButton')">
<template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />

2
components/lib/treeselect/TreeSelect.vue
View File

@ -460,7 +460,7 @@ export default {
},
scrollValueInView() {
if (this.overlay) {
let selectedItem = DomHandler.findSingle(this.overlay, '[data-p-highlight="true"]');
let selectedItem = DomHandler.findSingle(this.overlay, '[data-p-selected="true"]');
if (selectedItem) {
selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });

2
components/lib/treetable/HeaderCell.vue
View File

@ -10,7 +10,7 @@
v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()"
:data-p-sorted="isColumnSorted()"
:data-p-frozen-column="columnProp('frozen')"
>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>

6
components/lib/treetable/TreeTableRow.vue
View File

@ -15,7 +15,7 @@
@keydown="onKeyDown"
@touchend="onTouchEnd"
v-bind="ptm('row', ptmOptions)"
:data-p-highlight="selected"
:data-p-selected="selected"
>
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<TTBodyCell
@ -290,14 +290,14 @@ export default {
},
onTabKey() {
const rows = [...DomHandler.find(this.$refs.node.parentElement, 'tr')];
const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true');
const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-selected') || row.getAttribute('aria-checked') === 'true');
rows.forEach((row) => {
row.tabIndex = -1;
});
if (hasSelectedRow) {
const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true');
const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-selected') || node.getAttribute('aria-checked') === 'true');
selectedNodes[0].tabIndex = 0;