# @irfanismail/mon-dropdown

> MonDropdown a feature-rich dropdown Vue2 component. It focuses on bringing the best of Vue's features to achieve common & advanced behavior patterns while giving you the freedom to style the component to your liking. Built-to-work with TailwindCSS.

Latest version **1.0.2** (published 2021-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @irfanismail/mon-dropdown
pnpm add @irfanismail/mon-dropdown
yarn add @irfanismail/mon-dropdown
bun add @irfanismail/mon-dropdown
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-10-07 |
| First published | 2021-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | irfanismail |

## Links

- npm: https://www.npmjs.com/package/@irfanismail/mon-dropdown
- npm.io page: https://npm.io/package/@irfanismail/mon-dropdown

## Recent versions

- 1.0.2 (latest) — 2021-10-07
- 1.0.1 — 2021-10-07

## README

# mon-dropdown

MonDropdown a feature-rich dropdown Vue2 component. It focuses on bringing the best of Vue's features to achieve common &amp; advanced behavior patterns while giving you the freedom to style the component to your liking. Built-to-work with <a href="https://tailwindcss.com/">TailwindCSS</a>.

![mon-dropdown-gif](https://github.com/irfancoder/mon-dropdown/blob/master/asset/mon-dropdown.gif)

[Demo](https://jsfiddle.net/irfancoder/0L1o23s8/110/)

<!-- GETTING STARTED -->
## Getting Started 

```
// npm
npm i @irfanismail/mon-dropdown

// yarn
yarn add @irfanismail/mon-dropdown
```


<!-- USAGE EXAMPLES -->
## Usage 

1. Table of Props

| Props                 | Type          | Default                       |
| -------------         |-------------  | :-----------------:           |
| label                 | string        |                               |
| labelClass            | string        |                               |
| contentClass          | string        | 'mon-dropdown-content'        |
| enterActiveClass      | string        | 'mon-dropdown-enter-active'   |
| enterClass            | string        | 'mon-dropdown-enter'          |
| enterToClass          | string        | 'mon-dropdown-enter-to        |
| leaveActiveClass      | string        | 'mon-dropdown-leave-active'   |
| leaveClass            | string        | 'mon-dropdown-leave'          |
| leaveToClass          | string        | 'mon-dropdown-leave-to'       |
| anchor                | boolean       | false                         |
| dropUp                | boolean       | false                         |
| persistent            | boolean       | false                         |
| disableClickAway      | boolean       | false                         |
| disableEsc            | boolean       | false                         |
| openOnMount           | boolean       | false                         |

2. Combinations of Slots & Props
```
<!-- Basic Dropdown -->
props: 
* label
* labelClass
* anchor
* dropUp
* persistent
* disableClickAway
* disableEsc
* openOnMount 
  <mon-dropdown [...props]>
      <template #content="{ close, toggle }">...</template>
  </mon-dropdown>
  
<!-- Custom Trigger -->
props: 
* anchor
* dropUp
* persistent
* disableClickAway
* disableEsc
* openOnMount 

  <mon-dropdown [...props]>
    <template #trigger="{ toggle, open }">...</template>
    <template #content="{ toggle, close }">...</template>
  </mon-dropdown>
  
```

3. Lifecycle Hooks

| Hooks                 | Type          |
| -------------         |-------------  |
| before-open           | function      |
| after-open            | function      |
| before-close          | function      |
| after-close           | function      |

Check the [Demo](https://jsfiddle.net/irfancoder/0L1o23s8/110/) on how to use dropdown lifecycle hooks

4. Handling Dropdown Behavior outside Usual Scope

There will be times, you will find yourselves needing to trigger dropdown behaviors outside of the normal scope (eg. clicking a button). MonDropdown provides three (3) internal functions that can be accessed through Vue's `ref="..." & $refs`.

The three (3) functions are:

- toggleDropdown()
- openDropdown()
- closeDropdown()

Check the [Demo](https://jsfiddle.net/irfancoder/0L1o23s8/110/) on how to use dropdown's internal functions

<!-- LICENSE -->
## License
<a href="https://opensource.org/licenses/mit-license.php" target="_blank">MIT License</a>

<!-- CONTACT -->
## Contact

Irfan Ismail - [@irfancoder](https://twitter.com/irfancoder) - irfan.ismail96@gmail.com

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