80 lines
2 KiB
TypeScript
80 lines
2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { ref } from 'vue'
|
|
|
|
import { Textarea as NychTextarea } from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/Textarea',
|
|
component: NychTextarea,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
placeholder: {
|
|
control: { type: 'text' },
|
|
description: 'Placeholder text',
|
|
},
|
|
rows: {
|
|
control: { type: 'number' },
|
|
description: 'Visible rows',
|
|
},
|
|
disabled: {
|
|
control: { type: 'boolean' },
|
|
description: 'Disable the textarea',
|
|
},
|
|
invalid: {
|
|
control: { type: 'boolean' },
|
|
description: 'Mark the textarea as invalid',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof NychTextarea>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: () => ({
|
|
components: { NychTextarea },
|
|
setup() {
|
|
const value = ref('')
|
|
return { value }
|
|
},
|
|
template: `<NychTextarea v-model="value" rows="4" placeholder="Inscribe your oath…" style="width: 22rem;" />`,
|
|
}),
|
|
}
|
|
|
|
export const Filled: Story = {
|
|
render: () => ({
|
|
components: { NychTextarea },
|
|
setup() {
|
|
const value = ref(
|
|
'Whoever crosses the Styx leaves the world of light behind, and is bound to the laws of the deep.',
|
|
)
|
|
return { value }
|
|
},
|
|
template: `<NychTextarea v-model="value" rows="4" style="width: 22rem;" />`,
|
|
}),
|
|
}
|
|
|
|
export const Invalid: Story = {
|
|
render: () => ({
|
|
components: { NychTextarea },
|
|
setup() {
|
|
const value = ref('')
|
|
return { value }
|
|
},
|
|
template: `<NychTextarea v-model="value" rows="4" invalid placeholder="Required" style="width: 22rem;" />`,
|
|
}),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
render: () => ({
|
|
components: { NychTextarea },
|
|
setup() {
|
|
const value = ref('This scroll is sealed.')
|
|
return { value }
|
|
},
|
|
template: `<NychTextarea v-model="value" rows="4" disabled style="width: 22rem;" />`,
|
|
}),
|
|
}
|