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

<Meta
  title='Components/ResponseControl'
  component={MResponseControl}
  argTypes={{
    status: {
      control: {
        type: 'select',
        options: ['isLoading', 'hasError', 'isEmpty']
      }
    }
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MResponseControl },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
      <m-response-control :status="status">
      </m-response-control>
  </div>`
});

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

<Story
  name='Basic'
  args={{
    status: 'isLoading',
  }}
  parameters={{
    storysource: { disable: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />



## Usage

1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MResponseControl
  },

  ...
}
```

3.- Write your component implementation
```html
      <m-response-control status="isLoading"/>
```