@@ -299,7 +299,7 @@
})
"
:data-p-disabled="!y.selectable"
- :data-p-highlight="isYearSelected(y.value)"
+ :data-p-selected="isYearSelected(y.value)"
>
{{ y.value }}
@@ -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"])');
diff --git a/components/lib/galleria/GalleriaItem.vue b/components/lib/galleria/GalleriaItem.vue
index b41634010..ac27a59e0 100755
--- a/components/lib/galleria/GalleriaItem.vue
+++ b/components/lib/galleria/GalleriaItem.vue
@@ -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)"
>
@@ -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);
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 73bc4882d..a9f238003 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -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)"
>
diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index e76c83f04..52e318de3 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -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)"
>
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index 5067e1de9..5fce7fddc 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -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)"
>
diff --git a/components/lib/multiselect/MultiSelect.spec.js b/components/lib/multiselect/MultiSelect.spec.js
index 4cd9099d2..185a046fe 100644
--- a/components/lib/multiselect/MultiSelect.spec.js
+++ b/components/lib/multiselect/MultiSelect.spec.js
@@ -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 () => {
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 863d36d82..7d38426d0 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -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)"
>
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index 38b9d826b..ca0eff97b 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -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) {
diff --git a/components/lib/paginator/PageLinks.vue b/components/lib/paginator/PageLinks.vue
index 150866d37..28c33672d 100755
--- a/components/lib/paginator/PageLinks.vue
+++ b/components/lib/paginator/PageLinks.vue
@@ -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 }}
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 6d426f7a2..0c0795110 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -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)"
>
@@ -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();
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 16c4b52a4..ffceb626d 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -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) {
diff --git a/components/lib/radiobutton/RadioButton.vue b/components/lib/radiobutton/RadioButton.vue
index 75d48a17b..2fca0e570 100755
--- a/components/lib/radiobutton/RadioButton.vue
+++ b/components/lib/radiobutton/RadioButton.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index a0ee31aec..19c3baff5 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -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)"
>
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index 1e3d17fbd..c274a0cf2 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -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)"
>
@@ -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;
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 14ac4c223..7388d4381 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -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"
>
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index b14058497..9f5df0633 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -1,5 +1,5 @@
-