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>

Name	Description	Type	Default	is Required
list	Array of your items. Should contain id	Array	---	true
defaultValue	id of pre selected item	String	undefined	false
filterQuery	The query that listItems gets generated based on	String	''	false
closeOnSelect	Should or should not change state to close after item selection	Boolean	true	false
closeOnClickaway	Should or should not change state to close after clickaway or esc keydown	Boolean	true	false
resetOnSelect	Should or should not reset filterQuery and listItems on item select	Boolean	true	false

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

Name	Description	Type	Default	is Required
list	The list that <dropdownue> provides for you	Array	---	true
item	An item of your list	---	true

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>

Name	Intension	Type
listItem	Copy of your passed list, plus some goodies	data
value	ID of current selected item	data
isClosed	Flag for state being close	flag
isOpen	Flag for state being open	flag
open	Changes state to open	function
close	Changes state to closed	function
toggle	Toggle state	function (Boolean)
filter	Filters listItems	function (String)

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

Name	Intension	Type
isSelected	Copy of your passed list, plus some goodies	flag
isHighlighted	ID of current selected item	flag
itemEvents	Events to be attached to list item DOM	data
highlight	Highlights the item via ID	funstion (item)

Caveats

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