User:Techit/Web/Components/Dropdown

thawia.ng web drop-down list or dropdown menu with generic actions

Dropdown is a menu used to display actions or links when clicking on an element.

Usage

idk you are on your own (jk ill write better one later) but heres the example

<template>
  <div class="cont">
    <section class="wrap">
        <div class="h-64"></div>
        <TDropdown 
            :dropdowns="dropdownData"
            @item-click="handleItemClick"
            @dropdown-open="handleDropdownOpen"
            @dropdown-close="handleDropdownClose"
        />
        <TDropdown 
            :dropdowns="dropdownData"
            @item-click="handleItemClick"
            @dropdown-open="handleDropdownOpen"
            @dropdown-close="handleDropdownClose"
        />
        <TDropdown 
            :dropdowns="dropdownData"
            @item-click="handleItemClick"
            @dropdown-open="handleDropdownOpen"
            @dropdown-close="handleDropdownClose"
        />
        <TDropdown 
            :dropdowns="dropdownData"
            @item-click="handleItemClick"
            @dropdown-open="handleDropdownOpen"
            @dropdown-close="handleDropdownClose"
        />
    </section>
  </div>
</template>

<script setup>
const dropdownData = ref([
  {
    id: 'actions',
    label: 'Actions',
    items: [
      {
        id: 'edit',
        label: 'Edit',
        icon: 'fas fa-edit',
        disabled: false
      },
      {
        id: 'copy',
        label: 'Copy',
        icon: 'fas fa-copy'
      },
      {
      },
      {
        id: 'delete',
        label: 'Delete',
        icon: 'fas fa-trash',
        disabled: true
      }
    ]
  }
])

const hoverDropdowns = ref([
  {
    id: 'nav-menu',
    label: 'Navigation',
    hover: true,
    items: [
      { id: 'home', label: 'Home' },
      { id: 'about', label: 'About' },
      { id: 'contact', label: 'Contact' }
    ]
  }
])
const handleItemClick = (data) => {
  console.log('Item clicked:', data)
  if (data.item.id === 'profile') {
    navigateTo('/profile')
  } else if (data.item.id === 'logout') {
    console.log('Logging out...')
  }
}

const handleDropdownOpen = (index) => {
  console.log('Dropdown opened:', index)
}

const handleDropdownClose = (index) => {
  console.log('Dropdown closed:', index)
}

const addDropdownItem = (dropdownIndex, newItem) => {
  dropdownData.value[dropdownIndex].items.push(newItem)
}

const removeDropdownItem = (dropdownIndex, itemId) => {
  const dropdown = dropdownData.value[dropdownIndex]
  dropdown.items = dropdown.items.filter(item => item.id !== itemId)
}
</script>