histoire icon indicating copy to clipboard operation
histoire copied to clipboard

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

Open itslewin opened this issue 1 year ago • 2 comments
trafficstars

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

itslewin avatar Feb 13 '24 09:02 itslewin