import type { StoryFn } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';
import N8nInputNumber from './InputNumber.vue';
export default {
title: 'Core/Input Number',
component: N8nInputNumber,
argTypes: {
placeholder: {
control: 'text',
},
disabled: {
control: {
type: 'boolean',
},
},
controls: {
control: {
type: 'boolean',
},
},
precision: {
control: {
type: 'number',
},
},
min: {
control: {
type: 'number',
},
},
max: {
control: {
type: 'number',
},
},
step: {
control: {
type: 'number',
},
},
title: {
control: 'text',
},
},
parameters: {
docs: {
description: {
component: 'A numeric input control for entering and stepping through numbers.',
},
},
backgrounds: { default: '--color--background--light-2' },
},
};
const methods = {
onUpdateModelValue: action('update:modelValue'),
};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nInputNumber,
},
template:
'',
data() {
return {
val: null,
};
},
methods,
});
export const Input = Template.bind({});
Input.args = {
placeholder: 'placeholder...',
controls: false,
};
const ManyTemplate: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nInputNumber,
},
template:
'
',
methods,
data() {
return {
val: '',
};
},
});
export const Sizes = ManyTemplate.bind({});
Sizes.args = {
placeholder: 'placeholder...',
controls: false,
};
const ControlsTemplate: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nInputNumber,
},
template:
'
',
methods,
data() {
return {
val: '',
};
},
});
export const Controls = ControlsTemplate.bind({});
Controls.args = {
placeholder: 'placeholder...',
};