npm package: @mtcmedia/vue-collapsible
Description: Vue 3 collapsible component
Author: Paul McAvoy
Latest version: 3.0.0

[![npm version](https://badge.fury.io/js/@mtcmedia%2Fvue-collapsible.svg)](https://badge.fury.io/js/@mtcmedia%2Fvue-collapsible)
# @mtcmedia/vue-collapsible

![mtc. Vue](src/assets/logo.png)
## Install to production site
```bash
npm install @mtcmedia/vue-collapsible
```
## Vue 2 - Install to production site
```bash
npm install @mtcmedia/vue-collapsible@2.0.1
```

## Usage
```js
import MtcCollapsible from '@mtcmedia/vue-collapsible'
import '@mtcmedia/vue-collapsible/dist/MtcCollapsible.css'

Vue.component('MCollapsible', MtcCollapsible)
```

```html
<MCollapsible>
    <template #title-button>
        <h2>replaces all content within the button</h2>
    </template>
    <!-- this is the main slot -->
    <h2>Add collapsible content here!</h2>
    <p>This can be anything</p>
</MCollapsible>

<!-- Option with completely custom html within trigger -->
<MCollapsible>
    <template #trigger="{ triggerProps }">
        <a href="https://www.mtcmedia.co.uk"
            :class="triggerProps.classes"
        >mtc.</a>
    </template>
    <!-- this is the main slot -->
    <h2>Add collapsible content here!</h2>
    <p>This can be anything</p>
</MCollapsible>
<MCollapsible>
    <template #trigger="{ triggerProps }">
        <button
            :class="triggerProps.classes"
            @click.prevent="customTriggerFunction(triggerProps)"
            :disabled="triggerProps.disabled"
        >mtc.</button>
    </template>
    <!-- this is the main slot -->
    <template #default>
        <h2>Add collapsible content here!</h2>
        <p>This can be anything</p>
        <p>Maybe you require to calculate something before opening the overlay</p>
    </template>
</MCollapsible>
```
```js
customTriggerFunction () {
    triggerProps.setDisabled = true
}
```
### Props
The component accepts these props:

| Attribute    | Type     | Default   | Description      |
| :---         | :---     | :---      | :---             |
| active       | Boolean  | `false`   | Set as closed by default |
| disabled     | Boolean  | `false`   | Prevent button from being clickable |
| hash     | String  | empty   | Matching window.location.hash will open this component |

### Slots
The component accepts these slots:

* `default` : The content that will be hidden/shown on click of the button
* `title-button` : Replace entire button content
* `title-text` : Use to define the text the button
* `title-icon` : Use to add a custom icon to the title button
* `trigger` : Replace button trigger with custom html - has access to triggerProps as scoped data

```js
triggerProps = {
    classes: [
        'MCollapsible__title',
        'MCollapsible__button'
    ],
    active: this.show, // the active state of this panel
    disabled: this.isDisabled, // the disabled state of this trigger
    showContent: this.showContent, // the function to trigger active state of this panel and toggle the content
    setDisabled: this.setDisabled // use this function to set the disabled state of the trigger
}
```

## Development Setup
```bash
npm install
```

### Compiles and hot-reloads for development
```bash
npm run serve
```

### Compiles and minifies for production
```bash
npm run build
```

### Run your unit tests
```bash
npm run test:unit
```

### Lints and fixes files
```bash
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).