# @mtcmedia/vue-collapsible

> Vue 3 collapsible component

Latest version **3.0.0** (published 2022-07-06) · 0 weekly downloads

## Install

```sh
npm install @mtcmedia/vue-collapsible
pnpm add @mtcmedia/vue-collapsible
yarn add @mtcmedia/vue-collapsible
bun add @mtcmedia/vue-collapsible
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-07-06 |
| First published | 2021-02-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 448.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Paul McAvoy |
| Maintainers | mtcmedia |
| Keywords | mtc, vue, vuejs, panel, accordion, collapsible |

## Links

- npm: https://www.npmjs.com/package/@mtcmedia/vue-collapsible
- npm.io page: https://npm.io/package/@mtcmedia/vue-collapsible

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 3.0.0 (latest) — 2022-07-06
- 2.0.1 — 2022-04-05
- 2.0.0 — 2022-04-05
- 1.5.0 — 2021-08-20
- 1.4.1 — 2021-07-26
- 1.4.0 — 2021-05-11
- 1.3.0 — 2021-04-14
- 1.2.1 — 2021-03-31
- 1.2.0 — 2021-02-20
- 1.1.0 — 2021-02-20
- 1.0.0 — 2021-02-19
- 0.0.0 — 2021-02-12

## README

[![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/).

---
_Source: https://npm.io/package/@mtcmedia/vue-collapsible · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._