Fixed #4780 - TabMenu/Steps: active option for item templating

primefaces · Nov 9, 2023 · fad8a9a · fad8a9a
1 parent da0b83e
commit fad8a9a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
@@ -180,6 +180,10 @@ export interface StepsSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Current active state of the menuitem
+         */
+        active: boolean;
         /**
          * Label property of the menuitem
          */

diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
@@ -18,7 +18,7 @@
                             <span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
                         </span>
                     </template>
-                    <component v-else :is="$slots.item" :item="item" :index="index" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
+                    <component v-else :is="$slots.item" :item="item" :index="index" :active="index === d_activeStep" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
                 </li>
             </template>
         </ol>

diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
@@ -203,6 +203,14 @@ export interface TabMenuSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Index of the menuitem
+         */
+        index: number;
+        /**
+         * Current active state of the menuitem
+         */
+        active: boolean;
         /**
          * Label property of the menuitem
          */

diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
@@ -20,7 +20,7 @@
                             <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
                         </a>
                     </template>
-                    <component v-else :is="$slots.item" :item="item" :index="i" :label="label(item)" :props="getMenuItemProps(item, i)"></component>
+                    <component v-else :is="$slots.item" :item="item" :index="i" :active="i === d_activeIndex" :label="label(item)" :props="getMenuItemProps(item, i)"></component>
                 </li>
             </template>
             <li ref="inkbar" role="none" :class="cx('inkbar')" v-bind="ptm('inkbar')"></li>