Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Nathan7139 opened this issue May 6, 2024 · 0 comments
Open

Comments

@Nathan7139
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant