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

<Meta
  title='Components/Pagination'
  component={MPagination}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MPagination },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <m-pagination
      :current-page="currentPage"
      :page-count="pageCount"
      :visible-pages-count="visiblePagesCount"
      :offset="offset"
      @nextPage="currentPage++"
      @previousPage="currentPage--" />
  </div>`
});

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

<Story
  name='Basic'
  args={{
    currentPage:10,
    pageCount:30,
    visiblePagesCount:7
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage

1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MPagination
  },

  ...
}
```

3.- Write your component implementation
```html
<m-pagination
  :current-page="10"
  :page-count="30"
  :visible-pages-count="7" />
```