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

<Meta
  title='Components/LoadingState'
  component={MLoadingState}
  argTypes={{
    primary: { control: { type: 'color' } },
    secondary: { control: { type: 'color' } },
    time: { control: {type: 'range', min: .1, max: 4.0, step: .1} },
    rtl: { control: { type: 'boolean' } },
    width: { control: {type: 'range', min: 400, max: 2500 } },
    height: { control: {type: 'number', disable: true } }
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MLoadingState },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <m-loading-state
      :primary="primary"
      :secondary="secondary"
      :speed="time"
      :rtl="rtl"
      :width="width"
      :height="height" />
  </div>`
});

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

<Story
  name='Basic'
  args={{
    width: 800,
    height: 480,
    time: 2
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage


1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MLoadingState
  },

  ...
}
```

3.- Write your component implementation

```html
<m-loading-state />
```