import { Meta, Story, Title, Subtitle, Description, ArgsTable } from '@storybook/addon-docs/blocks';
import MInput from './index.vue';

<Meta
  title='Components/Input'
  component={MInput}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MInput },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
      <m-input
      v-model="value"
      :label="label"
      :notification-text="notificationText"
      :custom-class="customClass"
      :custom-class-label="customClassLabel"
      :custom-class-input="customClassInput"
      :notification-warning="notificationWarning"
      :notification-error="notificationError"
      :check="check"
      :loading="loading"
      :close="close"
      :disabled="disabled"
      :id="inputId"
      :type="type"
      :placeholder="InputPlaceholder"
      aria-describedby="test-2"/>
  </div>`
});

<Title />
<Subtitle />
<Description />

<Story
  name='Basic'
  args={{
    type: 'text',
    InputPlaceholder: 'Placeholder',
    inputId: 'test-id',
    value: '',
    label: 'Label default:',
    notificationText: 'Error default',
    customClassLabel: '',
    customClassInput: '',
    notificationWarning: false,
    notificationError: false,
    check: false,
    loading: false,
    close: false,
    disabled: false,
  }}
  parameters={{
    storysource: { disable: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage

1.- Import the component

```javascript
import { MInput } from '@modyo/financial-commons';
```

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MInput
  },

  ...
}
```

3.- Write your component implementation
```html
      <m-input
      v-model="value"
      :label="label"
      :notification-text="'Error default'"
      :custom-class="''"
      :notification-warning="false"
      :notification-error="false"
      :check="false"
      :loading="false"
      :close="false"
      :disabled="false"
      id="test-id"
      type="text"
      placeholder="Placeholder"
      aria-describedby="test-2"/>
```