97 lines
3 KiB
TypeScript
97 lines
3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { ref } from 'vue'
|
|
|
|
import {
|
|
Dialog as NychDialog,
|
|
DialogTrigger as NychDialogTrigger,
|
|
DialogContent as NychDialogContent,
|
|
DialogHeader as NychDialogHeader,
|
|
DialogTitle as NychDialogTitle,
|
|
DialogFooter as NychDialogFooter,
|
|
Button as NychButton,
|
|
} from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/Dialog',
|
|
component: NychDialog,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof NychDialog>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: () => ({
|
|
components: { NychDialog, NychDialogTrigger, NychDialogContent, NychDialogHeader, NychDialogTitle, NychDialogFooter, NychButton },
|
|
template: `
|
|
<NychDialog>
|
|
<NychDialogTrigger as-child>
|
|
<NychButton>Summon the Oracle</NychButton>
|
|
</NychDialogTrigger>
|
|
<NychDialogContent style="width: 28rem;">
|
|
<NychDialogHeader>
|
|
<NychDialogTitle>Oracle of Delphi</NychDialogTitle>
|
|
</NychDialogHeader>
|
|
<p>
|
|
Seekers travelled from across the Aegean to hear the Pythia speak the
|
|
will of Apollo in riddling verse. Approach, and ask your question.
|
|
</p>
|
|
<NychDialogFooter>
|
|
<NychButton variant="secondary">Withdraw</NychButton>
|
|
<NychButton>Ask</NychButton>
|
|
</NychDialogFooter>
|
|
</NychDialogContent>
|
|
</NychDialog>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const Open: Story = {
|
|
render: () => ({
|
|
components: { NychDialog, NychDialogContent, NychDialogHeader, NychDialogTitle, NychDialogFooter, NychButton },
|
|
setup() {
|
|
const open = ref(true)
|
|
return { open }
|
|
},
|
|
template: `
|
|
<NychDialog v-model:open="open">
|
|
<NychDialogContent style="width: 28rem;">
|
|
<NychDialogHeader>
|
|
<NychDialogTitle>Passage of the Styx</NychDialogTitle>
|
|
</NychDialogHeader>
|
|
<p>
|
|
Charon ferries the souls of the dead across the river that divides the
|
|
world of the living from the world of the dead. One obol is required.
|
|
</p>
|
|
<NychDialogFooter>
|
|
<NychButton variant="secondary" @click="open = false">Turn back</NychButton>
|
|
<NychButton @click="open = false">Pay the toll</NychButton>
|
|
</NychDialogFooter>
|
|
</NychDialogContent>
|
|
</NychDialog>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const WithoutFooter: Story = {
|
|
render: () => ({
|
|
components: { NychDialog, NychDialogContent, NychDialogHeader, NychDialogTitle },
|
|
setup() {
|
|
const open = ref(true)
|
|
return { open }
|
|
},
|
|
template: `
|
|
<NychDialog v-model:open="open">
|
|
<NychDialogContent style="width: 26rem;">
|
|
<NychDialogHeader>
|
|
<NychDialogTitle>An Omen</NychDialogTitle>
|
|
</NychDialogHeader>
|
|
<p>A crow has settled upon the western gate. Interpret it as you will.</p>
|
|
</NychDialogContent>
|
|
</NychDialog>
|
|
`,
|
|
}),
|
|
}
|