refactor story

This commit is contained in:
Gauthier Roebroeck 2025-07-22 17:35:34 +08:00
parent 3bb10777a8
commit 6eacb13aff

View file

@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import FormattedMessage from './FormattedMessage.ts'
import FormattedMessage from './FormattedMessage'
const meta = {
component: FormattedMessage,
@ -8,22 +8,60 @@ const meta = {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
},
args: {},
} satisfies Meta<typeof Details>
} satisfies Meta<typeof FormattedMessage>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
messageDescriptor: {
defaultMessage: 'Please accept <a>terms <b>and<br></br></b> conditions</a> first',
id: 'test',
},
},
render: (args: object) => ({
components: { FormattedMessage },
setup() {
return { args }
},
template: `
<FormattedMessage :messageDescriptor="{
defaultMessage: 'Please accept <a>terms <b>and<br></br></b> conditions</a> first',
id: 'test',
}">
<FormattedMessage v-bind="args">
<template #a="Content">
<a href="#" target="_blank">
<component :is="Content"/>
</a>
</template>
<template #b="Content">
<strong>
<component :is="Content"/>
</strong>
</template>
<template #br>
<br/>
</template>
</FormattedMessage>
`,
}),
}
export const Values: Story = {
args: {
messageDescriptor: {
defaultMessage:
'Please accept <a>terms <b>and<br></br></b> conditions</a> first, <b>{name}</b>',
id: 'test',
},
values: {
name: 'John',
},
},
render: (args: object) => ({
components: { FormattedMessage },
setup() {
return { args }
},
template: `
<FormattedMessage v-bind="args">
<template #a="Content">
<a href="#" target="_blank">
<component :is="Content"/>
@ -43,31 +81,38 @@ export const Default: Story = {
}
export const NoMarkup: Story = {
args: {
messageDescriptor: {
defaultMessage: 'Please accept terms and conditions first',
id: 'test',
},
},
render: (args: object) => ({
components: { FormattedMessage },
setup() {
return { args }
},
template: `
<FormattedMessage :messageDescriptor="{
defaultMessage: 'Please accept terms and conditions first',
id: 'test',
}"/>
<FormattedMessage v-bind="args"/>
`,
}),
}
export const NoMarkupTag: Story = {
args: {
messageDescriptor: {
defaultMessage: 'Please accept terms and conditions first',
id: 'test',
},
tag: 'div',
},
render: (args: object) => ({
components: { FormattedMessage },
setup() {
return { args }
},
template: `
<FormattedMessage :messageDescriptor="{
defaultMessage: 'Please accept terms and conditions first',
id: 'test',
}" tag="div"/>
<FormattedMessage v-bind="args"/>
`,
}),
}