import TextField from '@/lib/components/TextField';
import { commonArgTypes } from '@/lib/constants';
import { Meta } from '@storybook/vue3/*';
const meta = {
title: 'Input Component/TextField',
component: TextField,
parameters: {
layout: 'centered',
themes: {
themeOverride: 'dark'
},
docs: {
description: {
component: '텍스트를 직접 입력할 수 있는 필드'
}
}
},
argTypes: {
scaling: {
...commonArgTypes.scaling,
description: 'TextField 길이'
},
radius: {
...commonArgTypes.radius,
description: 'TextField 둥글기'
},
color: {
...commonArgTypes.color,
description: 'TextField 색상'
},
appearance: {
table: {
category: 'Props',
type: { summary: ['classic', 'soft', 'surface'].join(' | ') }
},
control: { type: 'select' },
defaultValue: { summary: 'surface' },
description: 'TextField 스타일',
options: ['classic', 'soft', 'surface']
},
size: {
table: {
category: 'Props',
type: { summary: ['small', 'medium', 'large'].join(' | ') }
},
control: { type: 'select' },
options: ['small', 'medium', 'large'],
defaultValue: { summary: 'medium' },
description: 'TextField 크기'
}
}
} as Meta;
export default meta;
export const Default = {
render: (args: any) => ({
components: {
TextField
},
setup() {
return { args };
},
template: `
`
})
};
export const Radius = {
render: (args: any) => ({
components: {
TextField
},
setup() {
return { args };
},
template: `
`
})
};
export const Size = {
render: (args: any) => ({
components: {
TextField
},
setup() {
return { args };
},
template: `
`
})
};
export const Appearance = {
render: (args: any) => ({
components: {
TextField
},
setup() {
return { args };
},
template: `
`
})
};
export const Scaling = {
render: (args: any) => ({
components: {
TextField
},
setup() {
return { args };
},
template: `
`
})
};