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

<Meta
  title='Filters/Currency'
/>

export const Template = (args, {argTypes}) => ({
  filters: { currency },
  data() {
    return {
      price: 5000
    }
  },
  template: `
  <div class="container-md p-sm-5 p-4 bg-white">
    <div class="form-group">
      <label>Price</label>
      <input
        v-model="price"
        type="number"
        class="form-control">
    </div>
    <p>The formated input as currency is:</p>
    <div class="row">
    <div class="col-sm-6">
      <p class="text-info">Currency default format</p>
      <p>{{ price | currency }}</p>
      <div class="bg-light p-2">
        <small class="d-block text-secondary">
          <span v-pre> {{ price | currency }} </span>
        </small>
      </div>
    </div>
    <div class="col-sm-6">
      <p class="text-info">Currency as CLP format</p>
      <p>{{ price | currency({precision:0, separator: '.', symbol: '$ '}) }}</p>
      <div class="bg-light p-2">
        <small class="d-block text-secondary">
          <span v-pre> {{ price | currency({precision:0, separator: '.', symbol: '$ '}) }} </span>
        </small>
      </div>
      <ul class="bg-light p-2 pl-4">
        <li><small class="d-block text-secondary">Symbol $ with space</small></li>
        <li><small class="d-block text-secondary">No decimals</small></li>
        <li><small class="d-block text-secondary">Separator with . (dots)</small></li>
      </ul>
    </div>
    </div>
  </div>`
});

# Currency Filter

Currency the filter is a wrapper of currency.js

### Basic usage
<Story
  name='Examples'
  parameters={{
    controls: { disabled: true },
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Usage

1.- Import the filter

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

2.- Register the filter locally or globally

```javascript
{
  ...

  filters: {
    currency
  },

  ...
}
```

3.- Use the filter on a number or a string based number value

```html
{{ 5000 | currency }}
{{ price | currency }}
{{ 4000/200 | currency }}
{{ "1000" | currency }}
```

The default format values are:

```javascript
{
  symbol: '$',
  precision: 2,
  separator: ',',
  decimal: '.',
  formatWithSymbol: true
}
```

You can customize the format passing it as arg to the filter:

```html
{{ price | currency({precision:0,separator: '.', symbol: '$ '}) }}
```

For more information about currency.js visit https://currency.js.org/