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

Refactor #3965 - Update data-pc-* structure

pull/3997/head
mertsincan 2023-05-24 01:59:42 +01:00
parent f3c29933b5
commit 5b759e898a
6 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/lib/accordion/Accordion.vue
View File

@ -1,11 +1,10 @@
<template> <template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="accordion" data-pc-section="root"> <div :class="cx('root')" v-bind="ptm('root')">
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="cx('tab.root', { tab, index: i })" v-bind="getTabPT(tab, 'root', i)" data-pc-name="accordiontab" data-pc-section="root" :data-pc-index="i" :data-p-active="isTabActive(i)"> <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="cx('tab.root', { tab, index: i })" v-bind="getTabPT(tab, 'root', i)" :data-pc-index="i" :data-p-active="isTabActive(i)">
<div <div
:style="getTabProp(tab, 'headerStyle')" :style="getTabProp(tab, 'headerStyle')"
:class="[cx('tab.header', { tab, index: i }), getTabProp(tab, 'headerClass')]" :class="[cx('tab.header', { tab, index: i }), getTabProp(tab, 'headerClass')]"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }"
data-pc-section="header"
:data-p-highlight="isTabActive(i)" :data-p-highlight="isTabActive(i)"
:data-p-disabled="getTabProp(tab, 'disabled')" :data-p-disabled="getTabProp(tab, 'disabled')"
> >
@ -20,12 +19,11 @@
@click="onTabClick($event, tab, i)" @click="onTabClick($event, tab, i)"
@keydown="onTabKeyDown($event, tab, i)" @keydown="onTabKeyDown($event, tab, i)"
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }" v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
data-pc-section="headeraction"
> >
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component> <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" /> <component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" /> <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)" data-pc-section="headertitle">{{ tab.props.header }}</span> <span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component> <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a> </a>
</div> </div>
@ -39,9 +37,8 @@
role="region" role="region"
:aria-labelledby="getTabHeaderActionId(i)" :aria-labelledby="getTabHeaderActionId(i)"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }" v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
data-pc-section="toggleablecontent"
> >
<div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)" data-pc-section="content"> <div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)">
<component :is="tab"></component> <component :is="tab"></component>
</div> </div>
</div> </div>
@ -99,6 +96,7 @@ export default {
}, },
getTabPT(tab, key, index) { getTabPT(tab, key, index) {
const tabMetaData = { const tabMetaData = {
name: 'accordiontab',
props: tab.props, props: tab.props,
parent: { parent: {
props: this.$props, props: this.$props,

1
components/lib/accordiontab/AccordionTab.d.ts vendored
View File

@ -17,6 +17,7 @@ export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughA
* Custom passthrough(pt) option method. * Custom passthrough(pt) option method.
*/ */
export interface AccordionTabPassThroughMethodOptions { export interface AccordionTabPassThroughMethodOptions {
name?: string | undefined;
props: AccordionTabProps; props: AccordionTabProps;
parent: AccordionPassThroughOptions; parent: AccordionPassThroughOptions;
context: AccordionTabContext; context: AccordionTabContext;

6
components/lib/basecomponent/BaseComponent.vue
View File

@ -39,9 +39,13 @@ export default {
: ObjectUtils.getItemValue(options, params); : ObjectUtils.getItemValue(options, params);
}, },
getPTValue(obj = {}, key = '', params = {}) { getPTValue(obj = {}, key = '', params = {}) {
const datasetPrefix = 'data-pc-';
const self = this.getOptionValue(obj, key, params); const self = this.getOptionValue(obj, key, params);
const globalPT = this.getOptionValue(this.defaultPT, key, params); const globalPT = this.getOptionValue(this.defaultPT, key, params);
const merged = mergeProps(self, globalPT); const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(params['name'] || this.$.type.name) }),
[`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
});
return merged; return merged;
/* /*

33
components/lib/calendar/Calendar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span ref="container" :id="id" :class="cx('root')" :style="sx('root')" data-pc-name="calendar" data-pc-section="root" v-bind="ptm('root')"> <span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
<input <input
v-if="!inline" v-if="!inline"
:ref="inputRef" :ref="inputRef"
@ -38,10 +38,11 @@
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="panelId" :aria-controls="panelId"
:pt="ptm('dropdownButton')" :pt="ptm('dropdownButton')"
data-pc-section="dropdownbutton"
> >
<template #icon> <template #icon>
<slot name="dropdownicon"> <slot name="dropdownicon">
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" /> <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="icon" />
</slot> </slot>
</template> </template>
</CalendarButton> </CalendarButton>
@ -132,7 +133,7 @@
<table :class="cx('table')" role="grid" v-bind="ptm('table')"> <table :class="cx('table')" role="grid" v-bind="ptm('table')">
<thead v-bind="ptm('tableHeader')"> <thead v-bind="ptm('tableHeader')">
<tr v-bind="ptm('tableHeaderRow')"> <tr v-bind="ptm('tableHeaderRow')">
<th v-if="showWeek" scope="col" :class="cx('weekHeader')" :data-p-disabled="true" v-bind="ptm('weekHeader')"> <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader')" :data-p-disabled="true">
<span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span> <span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span>
</th> </th>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')"> <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')">
@ -143,12 +144,12 @@
<tbody v-bind="ptm('tableBody')"> <tbody v-bind="ptm('tableBody')">
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')"> <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
<td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')"> <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')">
<span :class="cx('weekLabelContainer')" :data-p-disabled="true" v-bind="ptm('weekLabelContainer')"> <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer')" :data-p-disabled="true">
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span> <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
{{ month.weekNumbers[i] }} {{ month.weekNumbers[i] }}
</span> </span>
</td> </td>
<td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="cx('day', { date })" :data-p-today="date.today" :data-p-other-month="date.otherMonth" v-bind="ptm('day')"> <td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="cx('day', { date })" v-bind="ptm('day')" :data-p-today="date.today" :data-p-other-month="date.otherMonth">
<span <span
v-ripple v-ripple
:class="cx('dayLabel', { date })" :class="cx('dayLabel', { date })"
@ -157,13 +158,13 @@
@keydown="onDateCellKeydown($event, date, groupIndex)" @keydown="onDateCellKeydown($event, date, groupIndex)"
:aria-selected="isSelected(date)" :aria-selected="isSelected(date)"
:aria-disabled="!date.selectable" :aria-disabled="!date.selectable"
v-bind="ptm('dayLabel')"
:data-p-disabled="!date.selectable" :data-p-disabled="!date.selectable"
:data-p-highlight="isSelected(date)" :data-p-highlight="isSelected(date)"
v-bind="ptm('dayLabel')"
> >
<slot name="date" :date="date">{{ date.day }}</slot> <slot name="date" :date="date">{{ date.day }}</slot>
</span> </span>
<div v-if="isSelected(date)" :class="cx('ariaSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaSelectedDay')"> <div v-if="isSelected(date)" :class="cx('ariaSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('ariaSelectedDay')" :data-p-hidden-accessible="true">
{{ date.day }} {{ date.day }}
</div> </div>
</td> </td>
@ -173,7 +174,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="currentView === 'month'" :class="cx('monthPicker')" data-pc-section="monthpicker" v-bind="ptm('monthPicker')"> <div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')">
<span <span
v-for="(m, i) of monthPickerValues" v-for="(m, i) of monthPickerValues"
:key="m" :key="m"
@ -181,18 +182,17 @@
@click="onMonthSelect($event, { month: m, index: i })" @click="onMonthSelect($event, { month: m, index: i })"
@keydown="onMonthCellKeydown($event, { month: m, index: i })" @keydown="onMonthCellKeydown($event, { month: m, index: i })"
:class="cx('month', { month: m, index: i })" :class="cx('month', { month: m, index: i })"
data-pc-section="month" v-bind="ptm('month')"
:data-p-disabled="!m.selectable" :data-p-disabled="!m.selectable"
:data-p-highlight="isMonthSelected(i)" :data-p-highlight="isMonthSelected(i)"
v-bind="ptm('month')"
> >
{{ m.value }} {{ m.value }}
<div v-if="isMonthSelected(i)" :class="cx('ariaMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaMonth')"> <div v-if="isMonthSelected(i)" :class="cx('ariaMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('ariaMonth')" :data-p-hidden-accessible="true">
{{ m.value }} {{ m.value }}
</div> </div>
</span> </span>
</div> </div>
<div v-if="currentView === 'year'" :class="cx('yearPicker')" data-pc-section="yearpicker" v-bind="ptm('yearPicker')"> <div v-if="currentView === 'year'" :class="cx('yearPicker')" v-bind="ptm('yearPicker')">
<span <span
v-for="y of yearPickerValues" v-for="y of yearPickerValues"
:key="y.value" :key="y.value"
@ -200,13 +200,12 @@
@click="onYearSelect($event, y)" @click="onYearSelect($event, y)"
@keydown="onYearCellKeydown($event, y)" @keydown="onYearCellKeydown($event, y)"
:class="cx('year', { year: y })" :class="cx('year', { year: y })"
data-pc-section="year" v-bind="ptm('year')"
:data-p-disabled="!y.selectable" :data-p-disabled="!y.selectable"
:data-p-highlight="isYearSelected(y.value)" :data-p-highlight="isYearSelected(y.value)"
v-bind="ptm('year')"
> >
{{ y.value }} {{ y.value }}
<div v-if="isYearSelected(y.value)" :class="cx('ariaYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaYear')"> <div v-if="isYearSelected(y.value)" :class="cx('ariaYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('ariaYear')" :data-p-hidden-accessible="true">
{{ y.value }} {{ y.value }}
</div> </div>
</span> </span>
@ -364,8 +363,8 @@
</div> </div>
</div> </div>
<div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')"> <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
<CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" :pt="ptm('todayButton')" /> <CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" :pt="ptm('todayButton')" data-pc-section="todaybutton" />
<CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" /> <CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" data-pc-section="clearbutton" />
</div> </div>
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>

2
components/lib/fieldset/Fieldset.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<fieldset :class="cx('root')" data-pc-name="fieldset" v-bind="ptm('root')"> <fieldset :class="cx('root')" v-bind="ptm('root')">
<legend :class="cx('legend')" v-bind="ptm('legend')"> <legend :class="cx('legend')" v-bind="ptm('legend')">
<slot v-if="!toggleable" name="legend"> <slot v-if="!toggleable" name="legend">
<span :id="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span> <span :id="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>

2
components/lib/panel/Panel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="cx('root')" data-pc-name="panel" v-bind="ptm('root')"> <div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('header')" v-bind="ptm('header')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot :id="ariaId + '_header'" name="header" :class="cx('title')"> <slot :id="ariaId + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="ariaId + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span> <span v-if="header" :id="ariaId + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>