dropdownue v0.1.51

Dropdownue

A renderless vue dropdown component

Why?

Almost every project needs a dropdown somewhere, And If you are like me, you just don't like to use UI frameworks and their made ready DOM and style and bullshits. So, I made a renderless component to abstract the usual logic behind dropdowns.

🐛 This may be unstable for now. I'm working on it. And there certainly will be some breaking changes.

Installation

yarn add dropdownue uuid
# OR
npm i dropdownue uuid

Usage

Register

import { Dropdownue, DropdownueItem } from "dropdownue";

export default {
  ...
  components: {
    Dropdownue,
    DropdownueItem
  }
  ...
};

<dropdownue>

You can use <dropdownue> like this. required props are listed on API section

<dropdownue
  :list="list"
  default-value="value"
  v-slot="{ instanceId, isOpen, value: providedValue, listItems, toggle }"
  @change="handleValueChange"
>
  ...
</dropdownue>

And in you script section...

export default {
	...
    data() {
        return {
	        list: [
                {
                    name: 'draft',
                    id: 1
                },
                {
                    name: 'published',
                    id: 2
                },
                {
                    name: 'archive',
                    id: 3,
                }
            ],
            value: 1
        }
    },
    methods: {
	    handleValueChange(newValue) {
		    ...
	    }
	}

<dropdownue-item>

Inside your <dropdownue>, there it goes a <dropdownue-item> with v-for on it.
:bangbang: You have to get instanceId from <dropdown> and pass it to <dropdown-item>
:exclamation: Remember to attach itemEvents to v-on of your list items

<dropdownue-item
  :instance-id="instanceId"
  v-slot="{ isHighlighted, isSelected, itemEvents }"
  v-for="item in listItems"
  :key="item.id"
  :list="listItems"
  :item="item"
>
  <li v-on="itemEvents(item)">
    {{ item.name }}
  </li>
</dropdownue-item>

API

This is the list of all APIs and Props you may want to know about.

Props

<dropdownue> ... </dropdwonue>

<dropdownue-item> ... </dropdwonue-item>

Provides

The API mostly contains Functions for you to call, Events to listen on, and Flags to check, plus a listItem to be rendered. use these in v-slot

<dropdownue> ... </dropdwonue>

<dropdownue-item> ... </dropdwonue-item>

Caveats

• You can use either filterQuery prop or filter function. whichever you want.