Refactor #3965 - Update data-pc-* structure

primefaces · May 24, 2023 · 5b759e8 · 5b759e8
1 parent f3c2993
commit 5b759e8
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 29 deletions.
diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
@@ -1,11 +1,10 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="accordion" data-pc-section="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 :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-index="i" :data-p-active="isTabActive(i)">
             <div
                 :style="getTabProp(tab, 'headerStyle')"
                 :class="[cx('tab.header', { tab, index: i }), getTabProp(tab, 'headerClass')]"
                 v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }"
-                data-pc-section="header"
                 :data-p-highlight="isTabActive(i)"
                 :data-p-disabled="getTabProp(tab, 'disabled')"
             >
@@ -20,12 +19,11 @@
                     @click="onTabClick($event, tab, i)"
                     @keydown="onTabKeyDown($event, tab, 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-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 :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" />
-                    <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>
+                    <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)" />
+                    <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>
                 </a>
             </div>
@@ -39,9 +37,8 @@
                     role="region"
                     :aria-labelledby="getTabHeaderActionId(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>
                     </div>
                 </div>
@@ -99,6 +96,7 @@ export default {
         },
         getTabPT(tab, key, index) {
             const tabMetaData = {
+                name: 'accordiontab',
                 props: tab.props,
                 parent: {
                     props: this.$props,

diff --git a/components/lib/accordiontab/AccordionTab.d.ts b/components/lib/accordiontab/AccordionTab.d.ts
@@ -17,6 +17,7 @@ export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughA
  * Custom passthrough(pt) option method.
  */
 export interface AccordionTabPassThroughMethodOptions {
+    name?: string | undefined;
     props: AccordionTabProps;
     parent: AccordionPassThroughOptions;
     context: AccordionTabContext;

diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
@@ -39,9 +39,13 @@ export default {
                 : ObjectUtils.getItemValue(options, params);
         },
         getPTValue(obj = {}, key = '', params = {}) {
+            const datasetPrefix = 'data-pc-';
             const self = this.getOptionValue(obj, 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;
             /*

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
@@ -1,5 +1,5 @@
 <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
             v-if="!inline"
             :ref="inputRef"
@@ -38,10 +38,11 @@
             :aria-expanded="overlayVisible"
             :aria-controls="panelId"
             :pt="ptm('dropdownButton')"
+            data-pc-section="dropdownbutton"
         >
             <template #icon>
                 <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>
             </template>
         </CalendarButton>
@@ -132,7 +133,7 @@
                                     <table :class="cx('table')" role="grid" v-bind="ptm('table')">
                                         <thead v-bind="ptm('tableHeader')">
                                             <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>
                                                 </th>
                                                 <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')">
                                             <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')">
-                                                    <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>
                                                         {{ month.weekNumbers[i] }}
                                                     </span>
                                                 </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
                                                         v-ripple
                                                         :class="cx('dayLabel', { date })"
@@ -157,13 +158,13 @@
                                                         @keydown="onDateCellKeydown($event, date, groupIndex)"
                                                         :aria-selected="isSelected(date)"
                                                         :aria-disabled="!date.selectable"
+                                                        v-bind="ptm('dayLabel')"
                                                         :data-p-disabled="!date.selectable"
                                                         :data-p-highlight="isSelected(date)"
-                                                        v-bind="ptm('dayLabel')"
                                                     >
                                                         <slot name="date" :date="date">{{ date.day }}</slot>
                                                     </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 }}
                                                     </div>
                                                 </td>
@@ -173,40 +174,38 @@
                                 </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
                                 v-for="(m, i) of monthPickerValues"
                                 :key="m"
                                 v-ripple
                                 @click="onMonthSelect($event, { month: m, index: i })"
                                 @keydown="onMonthCellKeydown($event, { 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-highlight="isMonthSelected(i)"
-                                v-bind="ptm('month')"
                             >
                                 {{ 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 }}
                                 </div>
                             </span>
                         </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
                                 v-for="y of yearPickerValues"
                                 :key="y.value"
                                 v-ripple
                                 @click="onYearSelect($event, y)"
                                 @keydown="onYearCellKeydown($event, y)"
                                 :class="cx('year', { year: y })"
-                                data-pc-section="year"
+                                v-bind="ptm('year')"
                                 :data-p-disabled="!y.selectable"
                                 :data-p-highlight="isYearSelected(y.value)"
-                                v-bind="ptm('year')"
                             >
                                 {{ 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 }}
                                 </div>
                             </span>
@@ -364,8 +363,8 @@
                         </div>
                     </div>
                     <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="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" />
+                        <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')" data-pc-section="clearbutton" />
                     </div>
                     <slot name="footer"></slot>
                 </div>

diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
@@ -1,5 +1,5 @@
 <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')">
             <slot v-if="!toggleable" name="legend">
                 <span :id="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>

diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
@@ -1,5 +1,5 @@
 <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')">
             <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>