77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { ref } from 'vue'
|
|
|
|
import { Select as NychSelect } from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/Select',
|
|
component: NychSelect,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
placeholder: {
|
|
control: { type: 'text' },
|
|
description: 'Placeholder text',
|
|
},
|
|
disabled: {
|
|
control: { type: 'boolean' },
|
|
description: 'Disable the select',
|
|
},
|
|
},
|
|
} 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 },
|
|
setup() {
|
|
const river = ref(null)
|
|
return { river, RIVERS }
|
|
},
|
|
template: `<NychSelect v-model="river" :options="RIVERS" placeholder="Choose a river" />`,
|
|
}),
|
|
}
|
|
|
|
export const Selected: Story = {
|
|
render: () => ({
|
|
components: { NychSelect },
|
|
setup() {
|
|
const river = ref('Lethe')
|
|
return { river, RIVERS }
|
|
},
|
|
template: `<NychSelect v-model="river" :options="RIVERS" placeholder="Choose a river" />`,
|
|
}),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
render: () => ({
|
|
components: { NychSelect },
|
|
setup() {
|
|
const river = ref('Styx')
|
|
return { river, RIVERS }
|
|
},
|
|
template: `<NychSelect v-model="river" :options="RIVERS" disabled />`,
|
|
}),
|
|
}
|
|
|
|
export const ObjectOptions: Story = {
|
|
render: () => ({
|
|
components: { NychSelect },
|
|
setup() {
|
|
const god = ref(null)
|
|
const gods = [
|
|
{ name: 'Apollo', domain: 'apollo' },
|
|
{ name: 'Hades', domain: 'hades' },
|
|
{ name: 'Hermes', domain: 'hermes' },
|
|
]
|
|
return { god, gods }
|
|
},
|
|
template: `<NychSelect v-model="god" :options="gods" optionLabel="name" optionValue="domain" placeholder="Choose a god" />`,
|
|
}),
|
|
}
|