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

<Meta
  title='Components/TableDraggable'
  component={MTableDraggable}
  argTypes={{
    stripedColor: {control:{type:'color'}},
    bodyTextColor: {control:{type:'color'}},
    backgroundColor: {control:{type:'color'}},
    headerTextColor: {control:{type:'color'}},
    headerBackgroundColor: {control:{type:'color'}},
    borderColor: {control:{type:'color'}},
    borderWidth: {
      control: {type:'range', min: 0, max: 100},
    },
    bodyItems: {control:{type:'object'}}
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MTableDraggable },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <m-table-draggable
      class="shadow-sm rounded-lg"
      :header-items="headerItems"
      :body-items="bodyItems"
      :striped="striped"
      :striped-color="stripedColor"
      :body-text-color="bodyTextColor"
      :background-color="backgroundColor"
      :header-text-color="headerTextColor"
      :header-background-color="headerBackgroundColor"
      :border-color="borderColor"
      :borderless="borderless"
      :border-width="borderWidth+'px'"
      :borders="borders"
      :z-index="zIndex" />
  </div>`
});

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

<Story
  name='Basic'
  args={{
    headerItems: ['Name','Age'],
    bodyItems: [
      ['Alex', 20],
      ['Jasmin', 37],
      ['Edgar', 43],
      ['Maria', 61]
    ],
    borderWidth: 1
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage

1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MTableDraggable
  },

  ...
}
```

3.- Write your component implementation

```html
<m-table-draggable
  :header-items="['Name','Age']"
  :body-items="[['Alex', 20],['Jasmin', 37]]" />
```