histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.16k stars 186 forks source link

Can't render multiple controls without wrapping them in a container #682

Open itslewin opened 7 months ago

itslewin commented 7 months ago

Describe the bug

The following code should render two controls (as shown in the documentation), however no controls are rendered.

<template #controls>
    <!-- no controls are rendered -->
    <HstSelect title="Color" v-model="state.color" :options="colors" />
    <HstText title="Label" v-model="state.label" />
</template>

Wrapping both controls inside a container solves the issue:

<template #controls>
    <!-- two controls are rendered -->
    <div>
        <HstSelect title="Color" v-model="state.color" :options="colors" />
        <HstText title="Label" v-model="state.label" />
    </div>
</template>

I provided a Nuxt Stackblitz reproduction, with two <Variant>s of <BaseButton>, reproducing the bug.

Reproduction

Nuxt Stackblitz

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh

Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm

npmPackages:
    @histoire/plugin-nuxt: ^0.17.10 => 0.17.10 
    @histoire/plugin-vue: ^0.17.11 => 0.17.11 
    histoire: ^0.17.9 => 0.17.9

Used Package Manager

npm

Validations

stackblitz[bot] commented 7 months ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

brc-dd commented 7 months ago

Experiencing the same issue. This was working fine till @histoire/plugin-vue@0.17.9

Most likely #673 broke this?