SpeedDial v2: Cannot use Scoped Slot to customize items

[service-paradis]

Describe the bug

When looking at the Slots section of the SpeedDial documentantion, we see that we could customize the items. To do this, we need to receive the item information. Unfortunately, there is an error in the codebase which make this impossible to use while receiving item information.

I can customize the item if I use the following, but without information about the item, every item will look the same...

  <SpeedDial :model="model" :type="type" :direction="direction">
    <template #item>
      my custom item
    </template>
  </SpeedDial>

If I use the following, which is what we expect to use, it does not work

  <SpeedDial :model="model" :type="type" :direction="direction">
    <template #item="itemProps">
      {{ itemProps.item.label }}
    </template>
  </SpeedDial>

The problem can be fixed in this file:
https://github.com/primefaces/primevue/blob/2.x/src/components/speeddial/SpeedDial.vue#L9

v-if="!$slots.item" should be v-if="!$slots.item && !$scopedSlots.item"

Reproducer

No response

PrimeVue version

2.10.0

Vue version

2.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

1. Try to customize SpeedDial items using scoped slots with something like:

  <SpeedDial :model="model" :type="type" :direction="direction">
    <template #item="itemProps">
      {{ itemProps.item.label }}
    </template>
  </SpeedDial>

2. Look at the rendered component that do not use your custom code

Expected behavior

We should be able to receive the items information when using the scoped slots to customize the look of items in the SpeedDial component.

[bahadirsofuoglu]

Hi,
You can try the below solution. The reason for this problem is the prop named 'item' used by the dynamic component.

Edit: Sorry for my mistake. I checked for Vue 3. v-if="!$slots.item && !$scopedSlots.item" solution works for Vue2. After release, you can use the below.

<SpeedDial :model="items" direction="up"> <template #item="itemProps"> {{ itemProps.item.label }} </template> </SpeedDial>

[service-paradis]

Thank you @bahadirsofuoglu!

[tugcekucukoglu]

Fixed with #2890