fix(5338): VNode props getter for Accordion, Stepper and TabView

components/lib/accordion/Accordion.vue

@@ -57,7 +57,7 @@
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, UniqueComponentId, ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseAccordion from './BaseAccordion.vue';
 
@@ -91,7 +91,7 @@ export default {
             return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
         },
         getTabProp(tab, name) {
-            return tab.props ? tab.props[name] : undefined;
+            return ObjectUtils.getVNodeProp(tab, name);
         },
         getKey(tab, index) {
             return this.getTabProp(tab, 'header') || index;

components/lib/stepper/Stepper.vue

@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import { UniqueComponentId } from 'primevue/utils';
+import { UniqueComponentId, ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseStepper from './BaseStepper.vue';
 import StepperContent from './StepperContent.vue';
@@ -172,7 +172,7 @@ export default {
             return this.d_activeStep === index;
         },
         getStepProp(step, name) {
-            return step.props ? step.props[name] : undefined;
+            return ObjectUtils.getVNodeProp(step, name);
         },
         getStepKey(step, index) {
             return this.getStepProp(step, 'header') || index;

components/lib/tabview/TabView.vue

@@ -95,7 +95,7 @@
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, UniqueComponentId, ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseTabView from './BaseTabView.vue';
 
@@ -141,7 +141,7 @@ export default {
             return this.d_activeIndex === index;
         },
         getTabProp(tab, name) {
-            return tab.props ? tab.props[name] : undefined;
+            return ObjectUtils.getVNodeProp(tab, name);
         },
         getKey(tab, index) {
             return this.getTabProp(tab, 'header') || index;

components/lib/utils/ObjectUtils.js

@@ -202,15 +202,35 @@ export default {
         return str;
     },
 
-    getVNodeProp(vnode, prop) {
+    /**
+     * VNode already "prepared" unit and props don't resolves to camelCase
+     * Try to find camelCase and after try with kebab-case
+     */
+    getVNodeProp(vnode, camelCaseProp) {
         if (vnode) {
             let props = vnode.props;
 
             if (props) {
-                let kebabProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-                let propName = Object.prototype.hasOwnProperty.call(props, kebabProp) ? kebabProp : prop;
+                let foundPropName;
+
+                if (Object.prototype.hasOwnProperty.call(props, camelCaseProp)) {
+                    foundPropName = camelCaseProp;
+                } else {
+                    let kebabProp = this.toKebabCase(camelCaseProp);
 
-                return vnode.type.extends.props[prop].type === Boolean && props[propName] === '' ? true : props[propName];
+                    if (Object.prototype.hasOwnProperty.call(props, kebabProp)) {
+                        foundPropName = kebabProp;
+                    }
+                }
+
+                if (foundPropName) {
+                    // vnode.type.extends is a component and it always have camelCase props (due to Vue compile)
+                    if (props[foundPropName] === '' && vnode.type.extends.props[camelCaseProp]?.type === Boolean) {
+                        return true;
+                    }
+
+                    return props[foundPropName];
+                }
             }
         }