105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { ref } from 'vue'
|
|
|
|
import {
|
|
Select as NychSelect,
|
|
SelectTrigger as NychSelectTrigger,
|
|
SelectValue as NychSelectValue,
|
|
SelectContent as NychSelectContent,
|
|
SelectItem as NychSelectItem,
|
|
} from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/Select',
|
|
component: NychSelect,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof NychSelect>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const RIVERS = ['Styx', 'Acheron', 'Cocytus', 'Phlegethon', 'Lethe']
|
|
|
|
export const Default: Story = {
|
|
render: () => ({
|
|
components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
|
|
setup() {
|
|
const river = ref<string>()
|
|
return { river, RIVERS }
|
|
},
|
|
template: `
|
|
<NychSelect v-model="river">
|
|
<NychSelectTrigger style="width: 14rem;">
|
|
<NychSelectValue placeholder="Choose a river" />
|
|
</NychSelectTrigger>
|
|
<NychSelectContent>
|
|
<NychSelectItem v-for="r in RIVERS" :key="r" :value="r">{{ r }}</NychSelectItem>
|
|
</NychSelectContent>
|
|
</NychSelect>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const Selected: Story = {
|
|
render: () => ({
|
|
components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
|
|
setup() {
|
|
const river = ref('Lethe')
|
|
return { river, RIVERS }
|
|
},
|
|
template: `
|
|
<NychSelect v-model="river">
|
|
<NychSelectTrigger style="width: 14rem;">
|
|
<NychSelectValue placeholder="Choose a river" />
|
|
</NychSelectTrigger>
|
|
<NychSelectContent>
|
|
<NychSelectItem v-for="r in RIVERS" :key="r" :value="r">{{ r }}</NychSelectItem>
|
|
</NychSelectContent>
|
|
</NychSelect>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
render: () => ({
|
|
components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
|
|
template: `
|
|
<NychSelect model-value="Styx" disabled>
|
|
<NychSelectTrigger style="width: 14rem;">
|
|
<NychSelectValue placeholder="Choose a river" />
|
|
</NychSelectTrigger>
|
|
<NychSelectContent>
|
|
<NychSelectItem v-for="r in RIVERS" :key="r" :value="r">{{ r }}</NychSelectItem>
|
|
</NychSelectContent>
|
|
</NychSelect>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const ObjectOptions: Story = {
|
|
render: () => ({
|
|
components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
|
|
setup() {
|
|
const god = ref<string>()
|
|
const gods = [
|
|
{ name: 'Apollo', domain: 'apollo' },
|
|
{ name: 'Hades', domain: 'hades' },
|
|
{ name: 'Hermes', domain: 'hermes' },
|
|
]
|
|
return { god, gods }
|
|
},
|
|
template: `
|
|
<NychSelect v-model="god">
|
|
<NychSelectTrigger style="width: 14rem;">
|
|
<NychSelectValue placeholder="Choose a god" />
|
|
</NychSelectTrigger>
|
|
<NychSelectContent>
|
|
<NychSelectItem v-for="g in gods" :key="g.domain" :value="g.domain">{{ g.name }}</NychSelectItem>
|
|
</NychSelectContent>
|
|
</NychSelect>
|
|
`,
|
|
}),
|
|
}
|