JoJk0 / storybook-addon-vue-slots

Vue slots support for Storybook.js
MIT License
17 stars 6 forks source link

[Feature request] Better default template & apply without any setting #25

Open Nathan7139 opened 6 months ago

Nathan7139 commented 6 months ago

Hi, I have a couple of suggestions to enhance this plugin:

1. Improve Default Template:

In the documentation, you mentioned:

By default, the addon will pass the [slotName] arg to the template, e.g., {{ args.default }}. Add a description to the slot by passing a string to the slot definition:

// MyComponent.stories.ts

export default meta = {
  parameters: {
    slots: {
      default: `Default slot content`,
    },
  },
}

However, if I write a story like this:

import type { Meta, StoryObj } from '@storybook/vue3'
import type { ComponentProps } from 'vue-component-type-helpers'
import Checkbox from './Checkbox.vue'

type PropsAndCustomArgs = ComponentProps<typeof Checkbox> & {
  default?: string
}

export default {
  title: 'Basic Component/Checkbox',
  component: Checkbox,
  parameters: {
    slots: {
      default: 'Default slot.'
    },
  },
} satisfies Meta<PropsAndCustomArgs>

export const Primary: StoryObj<PropsAndCustomArgs> = {
  args: {
    default: '<span>1234</span>',
  },
}

It will display <span>1234</span> in Storybook. We expect it to display 1234, similar to when we write:

<checkbox>
  <span>1234</span>
</checkbox>

This happens because the default template is {{ arg.[key] }}. I suggest changing it to <div v-html="arg.[key]">.

2. Apply with Zero Configuration

If I write a story like this:

import type { Meta, StoryObj } from '@storybook/vue3'
import type { ComponentProps } from 'vue-component-type-helpers'
import Checkbox from './Checkbox.vue'

type PropsAndCustomArgs = ComponentProps<typeof Checkbox> & {
  default?: string
}

export default {
  title: 'Basic Component/Checkbox',
  component: Checkbox,
} satisfies Meta<PropsAndCustomArgs>

export const Primary: StoryObj<PropsAndCustomArgs> = {
  args: {
    default: '<span>1234</span>',
  },
}

The type of default will not be inferred as html, and the template {{ arg.[key] }} will not be applied. It would be convenient if users didn't have to write anything and the default template would be automatically applied.