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

<Meta
  title='Filters/Slug'
/>

export const Template = (args, {argTypes}) => ({
  filters: { slug },
  data() {
    return {
      text: 'Sluggified Example Text 1'
    }
  },
  template: `
  <div class="container-md p-sm-5 p-4 bg-white">
    <div class="form-group">
      <label>Text to sluggify</label>
      <input
        v-model="text"
        type="text"
        class="form-control">
    </div>
    <p>The sluggified text is:</p>
    <p><strong>{{ text | slug }}</strong></p>
  </div>`
});

# Slug Filter

Filter to format text as slug.

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

### Usage

1.- Import the filter

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

2.- Register the filter locally or globally

```javascript
{
  ...

  filters: {
    slug
  },

  ...
}
```

3.- Use the filter on any text value.

```html
{{ 'Sluggified Example Text 1' | slug }}
{{ textVariable | slug }}
```