Vanilla Components

A dropdown component based on HeadlessUI. It is used to display a list of options that can be selected or menus. You can also leverage this dropdown to create new components, we currently provide 2 dropdowns, one based on HeadlessUI and another totally done from scratch that provides way more control over the dropdown. The API is pretty similar between both.

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code

vue

<script setup lang="ts">
import { Button, Dropdown, DropdownMenu, DropdownOption } from '@flavorly/vanilla-components'
import { ref } from 'vue'
import CheckCircleIcon from '~icons/heroicons/check-circle-solid'
import DocumentDuplicateIcon from '~icons/heroicons/document-duplicate-solid'

const value = ref(false)
const valueDisabled = ref(false)
const value2 = ref(false)
</script>

<template>
  <PreviewWrapper>
    <div class="h-[200px]">
      <div class="flex flex-col items-center justify-center mx-auto space-y-3 ">
        <DropdownMenu
          v-model="value"
          text="Options"
        >
          <!-- Option -->
          <DropdownOption>
            <DocumentDuplicateIcon class="w-5 h-5 mr-2" />
            <span>Copy Stuff</span>
          </DropdownOption>
          <!-- Option -->
          <DropdownOption>
            <CheckCircleIcon class="w-5 h-5 mr-2" />
            <span>Mark as Done</span>
          </DropdownOption>
        </DropdownMenu>

        <DropdownMenu
          v-model="value2"
          overlay
          text="Dropdown with Overlay"
        >
          <!-- Option -->
          <DropdownOption>
            <DocumentDuplicateIcon class="w-5 h-5 mr-2" />
            <span>Copy Stuff</span>
          </DropdownOption>
          <!-- Option -->
          <DropdownOption>
            <CheckCircleIcon class="w-5 h-5 mr-2" />
            <span>Mark as Done</span>
          </DropdownOption>
        </DropdownMenu>

        <Dropdown :teleport="true">
          <template #trigger>
            <Button class="btn">
              Click here
            </Button>
          </template>
          <div class="py-2 px-2 grid grid-cols-1 gap-2">
            <Button>Im a button inside this</Button>
            <Button>Im a button inside this</Button>
          </div>
        </Dropdown>

        <DropdownMenu
          v-model="value"
          :disabled="true"
          text="Disabled"
        >
          <!-- Option -->
          <DropdownOption>
            <DocumentDuplicateIcon class="w-5 h-5 mr-2" />
            <span>Copy Stuff</span>
          </DropdownOption>
          <!-- Option -->
          <DropdownOption>
            <CheckCircleIcon class="w-5 h-5 mr-2" />
            <span>Mark as Done</span>
          </DropdownOption>
        </DropdownMenu>
      </div>
    </div>
  </PreviewWrapper>
</template>

Props 📥

Props available for this component extending the default variant & global props.

Below are the props for the Dropdown Menu component based on Headless UI

Prop	Description	Accepted Values	Default
`modelValue`	The value for the dropdown	`true`, `false`	`false`
`text`	The label for the button	`String`	`undefined`
`buttonVariant`	The variant for the button	`String`	`undefined`
`teleport`	If we should teleport the dropdown	`Boolean`	`true`
`teleportTo`	Element to teleport	`string`	`body`
`tagName`	The tag for the trigger button	`string`	`div`
`dropdownTagName`	The tag for the trigger button	`string`	`div`
`disabled`	Disable or enable the trigger	`Boolean`	`false`
`toggleOnFocus`	Toggle the dropdown on Focus	`Boolean`	`true`
`toggleOnClick`	Toggle the dropdown on Click	`Boolean`	`true`
`toggleOnHover`	Toggle the dropdown on Hover	`Boolean`	`false`
`placement`	The placement of the dropdown ( Popper )	`string`	`undefined`
`usePopper`	If we should use Popper to place the dropdown	`Boolean`	`true`
`overlay`	Focus the dropdown by adding a overlay	`Boolean`	`false`
`spacedItems`	Space the items inside the dropdown	`Boolean`	`true`
`showArrow`	Show the dropdown arrow relative to the trigger	`Boolean`	`false`
`size`	The size of the dropdown	`string`	`default`
`position`	The alignment/position of the trigger	`string`	`center`
`trapFocus`	If we should trap the focus inside the dropdown	`Boolean`	`true`

Below are the props for the Dropdown component, totally vanilla implementation

Prop	Description	Accepted Values	Default
`modelValue`	The value for the dropdown	`true`, `false`	`false`
`text`	The label for the button	`String`	`undefined`
`teleport`	If we should teleport the dropdown	`Boolean`	`true`
`teleportTo`	Element to teleport	`string`	`body`
`tagName`	The tag for the trigger button	`string`	`div`
`dropdownTagName`	The tag for the trigger button	`string`	`div`
`dropdownAttributes`	Extra attributes for the dropdown	`Object`	`undefined`
`disabled`	Disable or enable the trigger	`Boolean`	`false`
`toggleOnFocus`	Toggle the dropdown on Focus	`Boolean`	`true`
`toggleOnClick`	Toggle the dropdown on Click	`Boolean`	`true`
`toggleOnHover`	Toggle the dropdown on Hover	`Boolean`	`false`
`closeOnClickAway`	If we should close the dropdown on clicking away	`Boolean`	`true`
`placement`	The placement of the dropdown ( Popper )	`string`	`undefined`
`show`	If the dropdown should start as shown	`Boolean`	`false`
`popperOptions`	Additional raw popper options	`Object`	`undefined`
`trapFocus`	If we should trap the focus inside the dropdown	`Boolean`	`true`

Slots 🧬

Current slots available for this component are the following:

Slot `default`

Actual content to show when the trigger is clicked / hovered. This is the actual content of the dropdown

Slot `trigger`

Slots usually used for the dropdown trigger button or any other element of your choice.

Events 🚇

Here you may find the events emitted by this component.

Event	Description	Value
`update:modelValue`	When the value changes	`any`

Dropdown #

Preview & Playground 🖼️ #

Props 📥 #

Dropdown Menu Props #

Dropdown Props #

Slots 🧬 #

Slot default #

Slot trigger #

Events 🚇 #

Dropdown

Preview & Playground 🖼️

Props 📥

Dropdown Menu Props

Dropdown Props

Slots 🧬

Slot `default`

Slot `trigger`

Events 🚇