Global story controls not working for vue2

[minddust]

Describe the bug

Global controls within story #controls slot are not showing up. same controls within variant #controls slot are working fine.

Reproduction

works

<template>
  <Story>
    <Variant>
      <template #controls>control</template>
      variant
    </Variant>
  </Story>
</template>

doesn't work

<template>
  <Story>
    <template #controls>control</template>
    <Variant>variant</Variant>
  </Story>
</template>

Based on docs: https://histoire.dev/guide/vue2/controls.html#controls-panel

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 204.26 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - ~/.nodenv/shims/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.17.0 - ~/Coding/histoire-demo/node_modules/.bin/npm
  Browsers:
    Firefox: 104.0
    Firefox Developer Edition: 104.0
    Safari: 15.6.1
  npmPackages:
    @histoire/plugin-vue2: 0.10.7 => 0.10.7 
    @vitejs/plugin-vue2: 1.1.2 => 1.1.2 
    histoire: 0.10.7 => 0.10.7 
    vite: 3.0.9 => 3.0.9

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[murongg]

I found that Story #controls slot will be override Variant #controls slot!

The Variant #controls slot higher priority! When Variant #controls has content, Story #controls slot will not render !

But I prefer that Story #controls slot and Variant #controls slot can be merged ! @Akryum

see: https://histoire.dev/guide/vue2/controls.html#controls-panel

[minddust]

@murongg that would be a feature request.

What I meant is that story controls are simply not working (at all) for vue2.

[iohansson]

in plugin-vue2 RenderStory.ts line 114

const vnodes = props.variant.slots()?.[props.slotName]?.({
  state: externalState,
}) ?? props.story.slots()?.[props.slotName]?.({
  state: externalState,
})

here props.story.slots().controls is not a function but an array of vnodes

[iohansson]

probably, because in Variant slots are proxy.$scopedSlots, and in Story slots are proxy.$slots

[iohansson]

yep, just changed it directly in the bundled dist and tried, I can see the global controls