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:
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.
Hi, I have a couple of suggestions to enhance this plugin:
1. Improve Default Template:
In the documentation, you mentioned:
However, if I write a story like this:
It will display
<span>1234</span>
in Storybook. We expect it to display1234
, similar to when we write: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:
The type of
default
will not be inferred ashtml
, 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.