93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { ref } from 'vue'
|
|
|
|
import { InputText as NychInputText } from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/InputText',
|
|
component: NychInputText,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
size: {
|
|
control: { type: 'select' },
|
|
options: ['small', undefined, 'large'],
|
|
description: 'Input size',
|
|
},
|
|
placeholder: {
|
|
control: { type: 'text' },
|
|
description: 'Placeholder text',
|
|
},
|
|
disabled: {
|
|
control: { type: 'boolean' },
|
|
description: 'Disable the input',
|
|
},
|
|
invalid: {
|
|
control: { type: 'boolean' },
|
|
description: 'Mark the input as invalid',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof NychInputText>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const modelTemplate = (attrs: string) => ({
|
|
components: { NychInputText },
|
|
setup() {
|
|
const value = ref('')
|
|
return { value }
|
|
},
|
|
template: `<NychInputText v-model="value" ${attrs} />`,
|
|
})
|
|
|
|
export const Default: Story = {
|
|
render: () => modelTemplate('placeholder="Speak, traveller…"'),
|
|
}
|
|
|
|
export const Filled: Story = {
|
|
render: () => ({
|
|
components: { NychInputText },
|
|
setup() {
|
|
const value = ref('Charon')
|
|
return { value }
|
|
},
|
|
template: `<NychInputText v-model="value" />`,
|
|
}),
|
|
}
|
|
|
|
export const Invalid: Story = {
|
|
render: () => modelTemplate('placeholder="Required" invalid'),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
render: () => ({
|
|
components: { NychInputText },
|
|
setup() {
|
|
const value = ref('Sealed')
|
|
return { value }
|
|
},
|
|
template: `<NychInputText v-model="value" disabled />`,
|
|
}),
|
|
}
|
|
|
|
export const Sizes: Story = {
|
|
render: () => ({
|
|
components: { NychInputText },
|
|
setup() {
|
|
const a = ref('')
|
|
const b = ref('')
|
|
const c = ref('')
|
|
return { a, b, c }
|
|
},
|
|
template: `
|
|
<div style="display: flex; flex-direction: column; gap: 1rem; width: 16rem;">
|
|
<NychInputText v-model="a" size="small" placeholder="Small" />
|
|
<NychInputText v-model="b" placeholder="Normal" />
|
|
<NychInputText v-model="c" size="large" placeholder="Large" />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|