From 354e4f21b9d7e7a4e2d225cc01ef4ae70ea77760 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 24 May 2023 12:06:21 +0300
Subject: [PATCH] Refactor #3965 - data-pc-* structure & class props fixes

---
 components/lib/autocomplete/AutoComplete.vue  | 59 +++++++++----------
 .../lib/autocomplete/BaseAutoComplete.vue     | 12 ++--
 components/lib/dropdown/Dropdown.vue          | 53 +++++------------
 components/lib/tabview/BaseTabView.vue        |  2 -
 4 files changed, 48 insertions(+), 78 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index a6abe1254..8e5fec9b7 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -1,11 +1,11 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" data-pc-name="autocomplete" data-pc-section="root" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="autocomplete">
         <input
             v-if="!multiple"
             ref="focusInput"
             :id="inputId"
             type="text"
-            :class="cx('input')"
+            :class="[cx('input'), inputClass]"
             :style="inputStyle"
             :value="inputValue"
             :placeholder="placeholder"
@@ -25,7 +25,6 @@
             @keydown="onKeyDown"
             @input="onInput"
             @change="onChange"
-            data-pc-section="input"
             v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <ul
@@ -39,7 +38,6 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
-            data-pc-section="container"
             v-bind="ptm('container')"
         >
             <li
@@ -52,17 +50,16 @@
                 :aria-selected="true"
                 :aria-setsize="modelValue.length"
                 :aria-posinset="i + 1"
-                data-pc-section="token"
                 v-bind="ptm('token')"
             >
                 <slot name="chip" :value="option">
-                    <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')" data-pc-section="tokenlabel">{{ getOptionLabel(option) }}</span>
+                    <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
                 </slot>
                 <slot name="removetokenicon" :class="cx(removeTokenIcon)" :onClick="(event) => removeOption(event, i)">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="cx(removeTokenIcon)" @click="removeOption($event, i)" aria-hidden="true" data-pc-section="removetokenicon" v-bind="ptm('removeTokenIcon')" />
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx(removeTokenIcon), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
-            <li :class="cx('inputToken')" role="option" data-pc-section="inputtoken" v-bind="ptm('inputToken')">
+            <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
                 <input
                     ref="focusInput"
                     :id="inputId"
@@ -86,23 +83,33 @@
                     @keydown="onKeyDown"
                     @input="onInput"
                     @change="onChange"
-                    data-pc-section="input"
                     v-bind="{ ...inputProps, ...ptm('input') }"
                 />
             </li>
         </ul>
-        <slot v-if="searching" name="loadingicon">
-            <i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon')]" aria-hidden="true" data-pc-section="loaidngicon" v-bind="ptm('loadingIcon')" />
-            <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
+        <slot v-if="searching" :class="cx('loadingIcon')" name="loadingicon">
+            <i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
+            <SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
         </slot>
-        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="cx('dropdownButton')" :disabled="disabled" aria-hidden="true" data-pc-section="dropdownbutton" @click="onDropdownClick" :pt="ptm('dropdownButton')">
+        <Button
+            v-if="dropdown"
+            ref="dropdownButton"
+            type="button"
+            tabindex="-1"
+            :class="[cx('dropdownButton'), dropdownClass]"
+            :disabled="disabled"
+            aria-hidden="true"
+            @click="onDropdownClick"
+            :pt="ptm('dropdownButton')"
+            data-pc-section="dropdownbutton"
+        >
             <template #icon>
-                <slot name="dropdownicon" :class="cx('dropdownIcon')">
-                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="cx('dropdownIcon')" data-pc-section="dropdownbuttonicon" v-bind="ptm('dropdownButton')['icon']" />
+                <slot name="dropdownicon" :class="dropdownIcon">
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
                 </slot>
             </template>
         </Button>
-        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddensearchresult" v-bind="ptm('hiddenSearchResult')">
+        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -110,27 +117,18 @@
                 <div
                     v-if="overlayVisible"
                     :ref="overlayRef"
-                    :class="cx('panel')"
+                    :class="[cx('panel'), panelClass]"
                     :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
                     @click="onOverlayClick"
                     @keydown="onOverlayKeyDown"
-                    data-pc-section="panel"
                     v-bind="{ ...panelProps, ...ptm('panel') }"
                 >
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
                     <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                         <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" data-pc-section="list" v-bind="ptm('list')">
+                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
                                 <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                    <li
-                                        v-if="isOptionGroup(option)"
-                                        :id="id + '_' + getOptionIndex(i, getItemOptions)"
-                                        :style="{ height: itemSize ? itemSize + 'px' : undefined }"
-                                        :class="cx('itemGroup')"
-                                        role="option"
-                                        data-pc-section="itemgroup"
-                                        v-bind="ptm('itemGroup')"
-                                    >
+                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
                                         <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                     </li>
                                     <li
@@ -147,7 +145,6 @@
                                         :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
-                                        data-pc-section="item"
                                         :data-p-highlight="isSelected(option)"
                                         :data-p-focus="focusedOptionIndex === getOptionIndex(index, getItemOptions)"
                                         :data-p-disabled="isOptionDisabled(option)"
@@ -158,7 +155,7 @@
                                         <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
-                                <li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" data-pc-section="emptymessage" v-bind="ptm('emptyMessage')">
+                                <li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')">
                                     <slot name="empty">{{ searchResultMessageText }}</slot>
                                 </li>
                             </ul>
@@ -168,7 +165,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddenselectedmessage" v-bind="ptm('hiddenSelectedMessage')">
+                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
                 </div>
diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
index a5e799099..1cec0f867 100644
--- a/components/lib/autocomplete/BaseAutoComplete.vue
+++ b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -118,19 +118,17 @@ const classes = {
             'p-overlay-open': instance.overlayVisible
         }
     ],
-    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', props.inputClass, { 'p-autocomplete-dd-input': props.dropdown }],
+    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
     container: 'p-autocomplete-multiple-container p-component p-inputtext',
     token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
     tokenLabel: 'p-autocomplete-token-label',
-    removeTokenIcon: ({ props }) => [props.removeTokenIcon, 'p-autocomplete-token-icon'],
+    removeTokenIcon: 'p-autocomplete-token-icon',
     inputToken: 'p-autocomplete-input-token',
-    loadingIcon: ({ props }) => [props.loadingIcon, 'p-autocomplete-loader'],
-    dropdownButton: ({ props }) => ['p-autocomplete-dropdown', props.dropdownClass],
-    dropdownIcon: ({ props }) => props.dropdownIcon,
+    loadingIcon: 'p-autocomplete-loader',
+    dropdownButton: 'p-autocomplete-dropdown',
     hiddenSearchResult: 'p-hidden-accessible',
-    panel: ({ instance, props }) => [
+    panel: ({ instance }) => [
         'p-autocomplete-panel p-component',
-        props.panelClass,
         {
             'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
             'p-ripple-disabled': instance.$primevue.config.ripple === false
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index f2f6acc44..320a7f6aa 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :id="id" :class="cx('root')" :style="sx('root')" data-pc-name="dropdown" data-pc-section="root" @click="onContainerClick" v-bind="ptm('root')">
+    <div ref="container" :id="id" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')">
         <input
             v-if="editable"
             ref="focusInput"
@@ -23,7 +23,6 @@
             @blur="onBlur"
             @keydown="onKeyDown"
             @input="onEditableInput"
-            data-pc-section="input"
             v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <span
@@ -44,26 +43,25 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            data-pc-section="input"
             v-bind="{ ...inputProps, ...ptm('input') }"
         >
             <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
         <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick">
-            <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" data-pc-section="clearicon" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" />
+            <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" />
         </slot>
-        <div :class="cx('trigger')" data-pc-section="trigger" v-bind="ptm('trigger')">
+        <div :class="cx('trigger')" v-bind="ptm('trigger')">
             <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
-                <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
-                <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
+                <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
             </slot>
             <slot v-else name="dropdownicon" :class="cx('dropdownIcon')">
-                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" data-pc-section="dropdownicon" v-bind="ptm('dropdownIcon')" />
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" data-pc-section="panel" v-bind="{ ...panelProps, ...ptm('panel') }">
+                <div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
                     <span
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
@@ -74,12 +72,11 @@
                         @focus="onFirstHiddenFocus"
                         :data-p-hidden-accessible="true"
                         :data-p-hidden-focusable="true"
-                        data-pc-section="hiddenfirstfocusableel"
                         v-bind="ptm('hiddenFirstFocusableEl')"
                     ></span>
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
-                    <div v-if="filter" :class="cx('header')" data-pc-section="header" v-bind="ptm('header')">
-                        <div :class="cx('filterContainer')" data-pc-section="filtercontainer" v-bind="ptm('filterContainer')">
+                    <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
+                        <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
                             <input
                                 ref="filterInput"
                                 type="text"
@@ -94,31 +91,22 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                data-pc-section="filterinput"
                                 v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
                             />
                             <slot name="filtericon" :class="cx('filterIcon')">
-                                <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" data-pc-section="filtericon" v-bind="ptm('filterIcon')" />
+                                <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" :data-p-hidden-accessible="true" data-pc-section="hiddenfilterresult" v-bind="ptm('hiddenFilterResult')">
+                        <span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" :data-p-hidden-accessible="true" v-bind="ptm('hiddenFilterResult')">
                             {{ filterResultMessageText }}
                         </span>
                     </div>
-                    <div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" data-pc-section="wrapper" v-bind="ptm('wrapper')">
+                    <div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
                         <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" data-pc-section="list" v-bind="ptm('list')">
+                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                        <li
-                                            v-if="isOptionGroup(option)"
-                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
-                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
-                                            :class="cx('itemGroup')"
-                                            role="option"
-                                            data-pc-section="itemgroup"
-                                            v-bind="ptm('itemGroup')"
-                                        >
+                                        <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
                                             <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                         </li>
                                         <li
@@ -138,7 +126,6 @@
                                             :data-p-highlight="isSelected(option)"
                                             :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
-                                            data-pc-section="item"
                                             v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                         >
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
@@ -150,20 +137,11 @@
                                         :style="sx('hiddenAccessible', isUnstyled)"
                                         role="option"
                                         :data-p-hidden-accessible="true"
-                                        data-pc-section="emptymessage"
                                         v-bind="ptm('emptyMessage')"
                                     >
                                         <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li
-                                        v-else-if="!options || (options && options.length === 0)"
-                                        :class="cx('emptyMessage')"
-                                        :style="sx('hiddenAccessible', isUnstyled)"
-                                        role="option"
-                                        :data-p-hidden-accessible="true"
-                                        data-pc-section="emptymessage"
-                                        v-bind="ptm('emptyMessage')"
-                                    >
+                                    <li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" role="option" :data-p-hidden-accessible="true" v-bind="ptm('emptyMessage')">
                                         <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
@@ -198,7 +176,6 @@
                         @focus="onLastHiddenFocus"
                         :data-p-hidden-accessible="true"
                         :data-p-hidden-focusable="true"
-                        data-pc-section="hiddenlastfocusableel"
                         v-bind="ptm('hiddenLastFocusableEl')"
                     ></span>
                 </div>
diff --git a/components/lib/tabview/BaseTabView.vue b/components/lib/tabview/BaseTabView.vue
index 8b38c25cd..0c14fe487 100644
--- a/components/lib/tabview/BaseTabView.vue
+++ b/components/lib/tabview/BaseTabView.vue
@@ -83,7 +83,6 @@ const classes = {
     ],
     navContainer: 'p-tabview-nav-container',
     previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
-    previousIcon: ({ props }) => props.prevIcon,
     navContent: 'p-tabview-nav-content',
     nav: 'p-tabview-nav',
     tab: {
@@ -101,7 +100,6 @@ const classes = {
     },
     inkbar: 'p-tabview-ink-bar',
     nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
-    nextIcon: ({ props }) => props.nextIcon,
     panelContainer: 'p-tabview-panels'
 };