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

<Meta
  title='Directives/Uppercase'
/>

export const Template = (args, {argTypes}) => ({
  directives: { Uppercase },
  template: `
  <div class="container-md p-sm-5 p-4 bg-white">
    <div class="form-group col-sm-8 col-md-8">
      <label>This text input will be uppercased by directive</label>
      <input v-uppercase type="text" class="form-control"/>
    </div>
  </div>`
});

export const Template2 = (args, {argTypes}) => ({
  directives: { Uppercase },
  template: `
  <div class="container-md p-sm-5 p-4 bg-white">
    <div class="form-group col-sm-8 col-md-8">
      <label>This textarea will be uppercased by directive</label>
      <textarea v-uppercase class="form-control" rows="5"></textarea>
    </div>
  </div>`
});

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

### Textarea Example
<Story
  name='Textarea Example'
  parameters={{
    controls: { disabled: true },
    storysource: { disabled: true }
  }}>
  {Template2.bind({})}
</Story>

### Usage

1.- Import the directive

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

2.- Register the directive locally or globally

```javascript
{
  ...

  directives: {
    uppercase
  },

  ...
}
```

3.- Add it to an input or textarea field

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

<textarea
  v-model="textarea"
  v-uppercase />
```