Dropper.mood

The best Vue.js dropdown.

Description

Dropper.mood is an intelligent dropdown component designed with Vue.js. It can be integrated into any Vue.js project and with several options and functionalities.

Documentation

Documentation

Installing

# npm
npm i --save dropper.mood

# yarn
yarn add dropper.mood

Usage

Dropper.mood is very simple to use.

Overall use

import Vue from 'vue';
import dropper from 'dropper.mood';
import 'dropper.mood/dist/dropper.css';

Vue.use(dropper);

Single file

<script lang="js">
import { MdDropper } from "dropper.mood";
import 'dropper.mood/dist/dropper.css';

export default {
  components: {
    MdDropper
  }
}
</script>

In your vue.js file

After that you can use the component in your code as follows.

<template>
  <div id="app">
    <div id="join-element-id">
      join element
    </div>
    <md-dropper join="#join-element-id">
      <!-- Your code hear -->
    </md-dropper>
  </div>
</template>

Props

join

• type: any
• requred: true

It is a valid html selector as an id, a class or any other properties allowing to select the element attached to the dropdown. The dropdown position will be calculated based on the position of the join element.

align

• type: string
• requred: false
• value: left | right | top | bottom

This property defines the dropdown alignment. The latter can be placed on the left, right, top or bottom. If it is not, the alignment will be calculated automatically with respect to the direction property.

direction

• type: string
• requred: false
• value: x | y

This property defines the alignment direction of the dropdown. If its value is x, the dropdown will align either to the left or to the right of the join element. If its value is y, the dropdown will be aligned either at the top or at the bottom of the join element. The default value is y. If the align property is defined, the direction property is not taken into account to calculate the position of the dropdown.

hide-arrow

• type: boolean
• requred: false
• value: true | false

This property allows you to display or hide the arrow.

justify

• type: boolean
• requred: false
• value: true | false

If true, the dropdown will be placed in the middle of the join element. This property is only taken into account if the display screen allows centered alignment.

show-on

• type: string | array
• requred: false
• default: click

this property defines the events of the join element which will trigger the opening of the dropdown. It can be a string if it is a single event or an array of string if it is several. The default value is click.

hide-on

• type: string | array
• requred: false

this property defines the events of the join element which will trigger the closure of the dropdown. It can be a string if it is a single event or an array of string if it is several.

z-index

• type: number
• requred: true
• default: 5000

Choose a large value so that the dropdown is not hidden by other dropdowns.

position-on-resize

• type: boolean
• requred: true

If true, the position of the dropdown will be calculated each time the size of the window is modified.

position-on-scroll

• type: boolean
• requred: false

If true, the position of the dropdown will be calculated with each scroll of the window.

Events

open

The event is triggered each time the dropdown opens.

close

The event is triggered each time the dropdown closes.

align

type: string value: left | right | top | bottom

Returns the position of the dropdown relative to the join element after opening. The values that can be sent are: left, right, top, bottom.

arrow-align

type: string value: left | right | top | bottom

Returns the position of the arrow relative to the dropdown join after opening. The values that can be sent are: left, right, top, bottom.

arrow-on

type: string value: left | right | top | bottom | middle

Returns the position of the arrow relative to the dropdown join after opening.

justify

type: boolean value: true | false

Returns true if the dropdown is positioned in the middle of the join element, and false otherwise.

esc-keydown

Triggers when the escape button is pressed while the dropdown is open.

other-area-clicked

Fires when a zone other than the dropdown receives a click while the dropdown is open.

Functions

You can access certain dropdown functions such as open and close. These two functions will respectively allow you to open and close the dropdown. Here is an example of using the functions.

<template>
  <div id="app">
    <div id="id-join-element" @click="openDropper">
      My join element
    </div>
    <md-dropper
      join="#id-join-element"
      ref="dropper"
      @esc-keydown="closeDropper"
      @other-area-clicked="closeDropper"
      class="my-super-dropdown"
      style="width: 250px; background-color: yellow; color: black; border-radius: .3em;"
    >
        <!-- Your code hear -->
    </md-dropper>

    <button @click="openDropper">
      open dropdown
    </button>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  // ...

  methods: {
    methods: {
      openDropper() {
        const dropper = this.$refs.dropper;
        if (dropper) {
          dropper.open();
        }
      }

      closeDropper() {
        const dropper = this.$refs.dropper;
        if (dropper) {
          dropper.close();
        }
      }
    }
  }
}
</script>

Author

@domutala

License

MIT