mirror of
https://github.com/gotson/komga.git
synced 2026-05-08 12:35:30 +02:00
refactor story
This commit is contained in:
parent
3bb10777a8
commit
6eacb13aff
1 changed files with 59 additions and 14 deletions
|
|
@ -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"/>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue