code examples with vue not complete

[kwatman]

Describe the bug

I have the following vue component:

<script setup lang="ts">
</script>
  <template>
    <div
      class="rounded-[30px] py-[50px] px-[30px] border-[3px] border-[#7EB3931A] bg-white fb-shadow"
    >
      <slot />
    </div>
  </template>
<style scoped></style>

For this component i created the following story

import type { Meta, StoryObj } from '@storybook/vue3'

import Card from './Card.vue'
import Text from '../Text/Text.vue'

// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
const meta: Meta<typeof Card> = {
  title: 'UI/Card',
  component: Card,
  subcomponents: { Text },
  argTypes: {
    default: {
      control: {
        type: 'text'
      }
    }
  },
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
  tags: ['autodocs']
}

export default meta
type Story = StoryObj<typeof Card>
/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.js.org/docs/vue/api/csf
 * to learn how to use render functions.
 */
export const Default: Story = {
  render: (args) => ({
    components: { Card },
    setup: () => ({ args }),
    template: '<Card v-bind="args" v-html="args.default"> </Card>'
  }),
  args: {
    default: 'This is a card'
  }
}

export const WithContent: Story = {
  render: (args, { argTypes }) => ({
    components: { Card, Text },
    setup: () => ({ args }),
    props: Object.keys(argTypes),
    template: `
            <Card>
                <Text tag="h3">This is a card title</Text>
                <Text tag="p">This is a card description</Text>
            </Card>
        `
  })
}

when i open the code example for the withcontent story it shows this code:

<template>
  <Card>
    <Text />
    <Text />
  </Card>
</template>

But i expected it to show this:

  <Card>
      <Text tag="h3">This is a card title</Text>
      <Text tag="p">This is a card description</Text>
  </Card>

To Reproduce

No response

System

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz  
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.58)
  npmPackages:
    @storybook/addon-docs: ^7.0.6 => 7.0.6 
    @storybook/addon-essentials: ^7.0.6 => 7.0.6 
    @storybook/addon-interactions: ^7.0.6 => 7.0.6 
    @storybook/addon-links: ^7.0.6 => 7.0.6 
    @storybook/addon-storysource: ^7.0.6 => 7.0.6 
    @storybook/addon-styling: ^1.0.1 => 1.0.1 
    @storybook/blocks: ^7.0.6 => 7.0.6 
    @storybook/testing-library: ^0.1.0 => 0.1.0 
    @storybook/vue3: ^7.0.6 => 7.0.6 
    @storybook/vue3-vite: ^7.0.6 => 7.0.6

Additional context

No response

[shilman]

@chakAs3 Any thoughts on this source snippet bug for Vue3? You added the feature in 7.0 right?

[ksarfaks87]

I have same problem

[chakAs3]

@ksarfaks87 @kwatman @shilman, I have a PR, that addresses all source snippet issues. I'm finishing it to be in next prelease !!

[chakAs3]

@ksarfaks87 @kwatman meanwhile please checkout it repo https://github.com/storybookjs/vue3-code-examples, i try add your story and check the source block, if it is ok for you. let me know

[kwatman]

thats ok for me

[chakAs3]

thats ok for me

Cool, This was available long time ago, we had to merge some other PRs before, It will be available soon

[kwatman]

I finally got the time to check out your repository. whenever i try to run it i get the following error:

X [ERROR] Could not resolve "./chunk-BC6D4WSH.mjs"

    node_modules/@storybook/vue3/dist/index.mjs:6:7:
      6 │ } from "./chunk-BC6D4WSH.mjs";

[Hai-San]

I have similar problem at 7.0.12 with vue 2 and 3

My story

export const ExampleAdvanced = {
  render: (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { XTooltip, XButton },
    template: `
    <XTooltip v-bind="$props" >
      {{$props.default}}
      <template #actions>
        <XButton inverted design="link">Botão link</XButton>
        <XButton inverted>Botão padrão</XButton>
      </template>
    </XTooltip>`,
  }),
  args: {
    advanced: true,
    title: 'Texto do título',
    imageSrc: faker.image.url({ width: 280, height: 168 }),
    default: faker.lorem.paragraphs(2),
  },
};

What storybook show:

<template>
  <XTooltip
    advanced
    title="Texto do título"
    image-src="https://loremflickr.com/280/168?lock=4311158372696064"
    default="Ipsum in illum suscipit optio hic in. Dolorum laudantium accusamus accusantium eos quaerat quisquam. Cumque asperiores dolore molestias perferendis assumenda tempore unde rerum.
Eum dolorum doloremque quis. Vitae dolorem iure labore in officia dolore. Repellat necessitatibus non magni."
  />
</template>

What I expected:

<template>
  <XTooltip
    advanced
    title="Texto do título"
    image-src="https://loremflickr.com/280/168?lock=4311158372696064"
    default="Ipsum in illum suscipit optio hic in. Dolorum laudantium accusamus accusantium eos quaerat quisquam. Cumque asperiores dolore molestias perferendis assumenda tempore unde rerum.
Eum dolorum doloremque quis. Vitae dolorem iure labore in officia dolore. Repellat necessitatibus non magni."
  >
    <XButton inverted design="link">Botão link</XButton>
    <XButton inverted>Botão padrão</XButton>
  </XTooltip>
</template>

[supuwoerc]

+1 autodocs failed to properly collect defined events and slots in vue2