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))" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)" @click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))" @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-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"
v-bind="getPTOptions(option, getItemOptions, i, 'option')" v-bind="getPTOptions(option, getItemOptions, i, 'option')"

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

@ -78,7 +78,7 @@
</Button> </Button>
</div> </div>
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicatorList'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicatorList')"> <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 <button
:class="cx('indicatorButton')" :class="cx('indicatorButton')"
type="button" type="button"
@ -498,7 +498,7 @@ export default {
}, },
onTabKey() { onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; 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 activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);

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

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

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

@ -1,5 +1,5 @@
<template> <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 <input
:id="inputId" :id="inputId"
type="checkbox" type="checkbox"

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

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

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

@ -35,8 +35,8 @@
v-bind="getBodyRowPTOptions('bodyRow')" v-bind="getBodyRowPTOptions('bodyRow')"
:data-p-index="rowIndex" :data-p-index="rowIndex"
:data-p-selectable-row="selectionMode ? true : false" :data-p-selectable-row="selectionMode ? true : false"
:data-p-highlight="selection && isSelected" :data-p-selected="selection && isSelected"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu" :data-p-selected-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
> >
<template v-for="(col, i) of columns"> <template v-for="(col, i) of columns">
<DTBodyCell <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"]'); const rows = DomHandler.find(body, 'tr[data-p-selectable-row="true"]');
if (event.code === 'Tab' && rows && rows.length > 0) { 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"]'); const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (firstSelectedRow) { if (firstSelectedRow) {

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

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

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

@ -240,7 +240,7 @@
}) })
" "
:data-p-disabled="!date.selectable" :data-p-disabled="!date.selectable"
:data-p-highlight="isSelected(date)" :data-p-selected="isSelected(date)"
data-pc-group-section="tablebodycelllabel" data-pc-group-section="tablebodycelllabel"
> >
<slot name="date" :date="date">{{ date.day }}</slot> <slot name="date" :date="date">{{ date.day }}</slot>
@ -273,7 +273,7 @@
}) })
" "
:data-p-disabled="!m.selectable" :data-p-disabled="!m.selectable"
:data-p-highlight="isMonthSelected(i)" :data-p-selected="isMonthSelected(i)"
> >
{{ m.value }} {{ m.value }}
<div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true"> <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-disabled="!y.selectable"
:data-p-highlight="isYearSelected(y.value)" :data-p-selected="isYearSelected(y.value)"
> >
{{ 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"> <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') { if (this.currentView === 'month') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="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)); cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0]; cell = selectedCell || cells[0];
} else if (this.currentView === 'year') { } else if (this.currentView === 'year') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="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)); cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0]; cell = selectedCell || cells[0];
} else { } else {
cell = DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]'); cell = DomHandler.findSingle(this.overlay, 'span[data-p-selected="true"]');
if (!cell) { if (!cell) {
let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); 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)" @mouseenter="onIndicatorMouseEnter(index)"
@keydown="onIndicatorKeyDown($event, index)" @keydown="onIndicatorKeyDown($event, index)"
v-bind="ptm('indicator', getIndicatorPTOptions(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> <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" /> <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@ -214,7 +214,7 @@ export default {
}, },
onTabKey() { onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; 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 activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);

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

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

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

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

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

@ -15,7 +15,7 @@
:aria-setsize="getAriaSetSize()" :aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)" :aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'item')" v-bind="getPTOptions(processedItem, index, 'item')"
:data-p-highlight="isItemActive(processedItem)" :data-p-active="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)" :data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(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.setProps({ modelValue: [wrapper.vm.options[0]] });
await wrapper.vm.onContainerClick(); 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'); 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.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]] });
await wrapper.vm.onContainerClick(); 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.findAll('li.p-multiselect-item')[1].attributes()['data-p-highlight']).toBe('true'); expect(wrapper.findAll('li.p-multiselect-item')[1].attributes()['data-p-selected']).toBe('true');
}); });
it('should close panel', async () => { 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)" @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'option')" 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-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"
> >

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

@ -229,7 +229,7 @@ export default {
updateListScroll() { updateListScroll() {
this.list = DomHandler.findSingle(this.$refs.listbox.$el, '[data-pc-section="list"]'); 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) { if (listItems && listItems.length) {
switch (this.reorderDirection) { switch (this.reorderDirection) {

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

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

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

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

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

@ -508,7 +508,7 @@ export default {
this.updateSelection(event); this.updateSelection(event);
}, },
updateListScroll(listElement) { 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) { if (listItems && listItems.length) {
switch (this.reorderDirection) { switch (this.reorderDirection) {

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

@ -1,5 +1,5 @@
<template> <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 <input
:id="inputId" :id="inputId"
type="radio" type="radio"

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

@ -139,7 +139,7 @@
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)" @click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))" @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-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"
v-bind="getPTItemOptions(option, getItemOptions, i, 'option')" v-bind="getPTItemOptions(option, getItemOptions, i, 'option')"

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template> <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')"> <span :class="cx('content')" v-bind="getPTOptions('content')">
<slot> <slot>
<slot name="icon" :value="modelValue" :class="cx('icon')"> <slot name="icon" :value="modelValue" :class="cx('icon')">

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

@ -1,5 +1,5 @@
<template> <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 <input
:id="inputId" :id="inputId"
type="checkbox" type="checkbox"

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

@ -14,7 +14,7 @@
@keydown="onKeyDown" @keydown="onKeyDown"
v-bind="level === 1 ? getPTOptions('node') : ptm('nodeChildren')" 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')"> <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'"> <template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" /> <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() { scrollValueInView() {
if (this.overlay) { 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) { if (selectedItem) {
selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' }); selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });

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

@ -10,7 +10,7 @@
v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }" v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')" :data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns" :data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()" :data-p-sorted="isColumnSorted()"
:data-p-frozen-column="columnProp('frozen')" :data-p-frozen-column="columnProp('frozen')"
> >
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span> <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" @keydown="onKeyDown"
@touchend="onTouchEnd" @touchend="onTouchEnd"
v-bind="ptm('row', ptmOptions)" 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"> <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<TTBodyCell <TTBodyCell
@ -290,14 +290,14 @@ export default {
}, },
onTabKey() { onTabKey() {
const rows = [...DomHandler.find(this.$refs.node.parentElement, 'tr')]; 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) => { rows.forEach((row) => {
row.tabIndex = -1; row.tabIndex = -1;
}); });
if (hasSelectedRow) { 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; selectedNodes[0].tabIndex = 0;