import { Meta, Story } from '@storybook/addon-docs/blocks';
import FormatRut from './index.js';

<Meta
  title='Directives/FormatRUT'
/>

export const Template = (args, {argTypes}) => ({
  directives: { FormatRut },
  template: `
  <div class="container-md p-sm-5 p-4 bg-white">
    <div class="form-group col-sm-6 col-md-4">
      <label>RUT</label>
      <input v-format-rut type="text" class="form-control"/>
    </div>
  </div>`
});

# Format Rut Directive
### Input Text Example
<Story
  name='Example'
  parameters={{
    controls: { disabled: true },
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Usage

1.- Import the directive

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

2.- Register the directive locally or globally

```javascript
{
  ...

  directives: {
    formatRut
  },

  ...
}
```

3.- Add it to an input field with type text

```html
<input
  v-model="rut"
  v-format-rut
  type="text">
```