ButtonDropDown vuejs and Primevue

ActionDropdown Component The ActionDropdown is a reusable Vue.js component built using PrimeVue's Button and Menu components. It provides a dropdown menu for actions, allowing developers to define customizable menu items with labels, icons, commands, and separators. Features Customizable Button: Configure label, icon, severity (e.g., primary, secondary), size, and more. Dynamic Menu Items: Define menu actions with labels, icons, commands, and styling. Event Emission: Emits an action event when a menu item is clicked. Flexible Alignment: Align the dropdown menu to the left or right. Accessibility: Supports disabling the button or individual menu items. Styling Support: Tailwind CSS and scoped styles for customization. Example Usage Here’s how you can use the ActionDropdown component in your Vue application: import { ref } from "vue"; import ActionDropdown from "@/components/buttons/ActionDropdown.vue"; const getRowActions = [ { label: "View Details", icon: "pi pi-eye", command: () => viewDetails(), }, { label: "Edit", icon: "pi pi-pencil", command: () => editItem(), }, { separator: true }, { label: "Delete", icon: "pi pi-trash", command: () => confirmDelete(), class: "danger-item", }, ]; const handleAction = (action) => { console.log("Action performed:", action.label); }; const viewDetails = () => { console.log("Viewing details..."); }; const editItem = () => { console.log("Editing item..."); }; const confirmDelete = () => { console.log("Confirming delete..."); }; Props Prop Type Default Description actions Array [] List of menu actions. Each action can have label, icon, command, class, and separator. buttonLabel String "Actions" Label text for the button. buttonIcon String "pi pi-ellipsis-v" Icon class for the button. buttonSeverity String "secondary" Button severity: primary, secondary, success, info, warning, danger, help. size String "medium" Button size: small, medium, large. textOnly Boolean false If true, the button will be styled as a text button. disabled Boolean false Disables the button. menuClass String "" Additional CSS classes for the dropdown menu. appendTo String "body" Determines where to append the dropdown menu. menuAlignment String "left" Menu alignment: left or right. Events Event Payload Description action Object Fired when a menu item is clicked. Payload contains the action's properties. Styling The ActionDropdown component uses Tailwind CSS for styling. Below are some key customizations: Button Styling .p-button-sm: Small size .p-button-lg: Large size .p-button-text: Text-only button Menu Styling .p-menuitem: Default menu item styling. .danger-item: Styling for actions that are marked as "danger" (e.g., delete). Alignment .menu-right: Aligns the dropdown to the right. Size Variants .small: Small menu items. .large: Large menu items. Notes Dependencies: This component relies on PrimeVue's Button and Menu components. Make sure to install and configure PrimeVue in your project. Tailwind CSS: The styles use Tailwind CSS utilities. Ensure Tailwind CSS is configured in your project. Validation: Action items are validated to ensure each item has a valid configuration (e.g., label and command are required unless it's a separator). Installation To use the ActionDropdown component, copy the file to your project and import it as needed. Install PrimeVue and Tailwind CSS if not already installed: npm install primevue @tailwindcss/postcss7-compat Configure PrimeVue in your main file: import { createApp } from "vue"; import PrimeVue from "primevue/config"; import App from "./App.vue"; import "./tailwind.css"; // Include Tailwind CSS const app = createApp(App); app.use(PrimeVue); app.mount("#app"); import { ref, computed } from "vue"; import Button from "primevue/button"; import Menu from "primevue/menu"; const props = defineProps({ // Action items configuration actions: { type: Array, default: () => [], validator: (items) => { return items.every((item) => { // Either has command/to/url, or is a separator return ( item.separator || (item.label && (item.command || item.to || item.url)) ); }); }, }, // Button appearance buttonLabel: { type: String, default: "Actions", }, buttonIcon: { type: String, default: "pi pi-ellipsis-v", }, buttonSeverity: { type: String, default: "secondary", validator: (value) => [ "primary", "secondary",

Apr 26, 2025 - 02:00

ActionDropdown Component

The ActionDropdown is a reusable Vue.js component built using PrimeVue's Button and Menu components. It provides a dropdown menu for actions, allowing developers to define customizable menu items with labels, icons, commands, and separators.

Features

Customizable Button: Configure label, icon, severity (e.g., primary, secondary), size, and more.
Dynamic Menu Items: Define menu actions with labels, icons, commands, and styling.
Event Emission: Emits an action event when a menu item is clicked.
Flexible Alignment: Align the dropdown menu to the left or right.
Accessibility: Supports disabling the button or individual menu items.
Styling Support: Tailwind CSS and scoped styles for customization.

Example Usage

Here’s how you can use the ActionDropdown component in your Vue application:

<template>
  
    
      :actions="getRowActions"
      button-label="Actions"
      button-icon="pi pi-ellipsis-v"
      button-severity="secondary"
      size="small"
      text-only
      @action="handleAction"
    />
  
template>

<script setup>
import { ref } from "vue";
import ActionDropdown from "@/components/buttons/ActionDropdown.vue";

const getRowActions = [
  {
    label: "View Details",
    icon: "pi pi-eye",
    command: () => viewDetails(),
  },
  {
    label: "Edit",
    icon: "pi pi-pencil",
    command: () => editItem(),
  },
  { separator: true },
  {
    label: "Delete",
    icon: "pi pi-trash",
    command: () => confirmDelete(),
    class: "danger-item",
  },
];

const handleAction = (action) => {
  console.log("Action performed:", action.label);
};

const viewDetails = () => {
  console.log("Viewing details...");
};

const editItem = () => {
  console.log("Editing item...");
};

const confirmDelete = () => {
  console.log("Confirming delete...");
};
script>

Props

Prop	Type	Default	Description
`actions`	`Array`	`[]`	List of menu actions. Each action can have `label`, `icon`, `command`, `class`, and `separator`.
`buttonLabel`	`String`	`"Actions"`	Label text for the button.
`buttonIcon`	`String`	`"pi pi-ellipsis-v"`	Icon class for the button.
`buttonSeverity`	`String`	`"secondary"`	Button severity: `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `help`.
`size`	`String`	`"medium"`	Button size: `small`, `medium`, `large`.
`textOnly`	`Boolean`	`false`	If `true`, the button will be styled as a text button.
`disabled`	`Boolean`	`false`	Disables the button.
`menuClass`	`String`	`""`	Additional CSS classes for the dropdown menu.
`appendTo`	`String`	`"body"`	Determines where to append the dropdown menu.
`menuAlignment`	`String`	`"left"`	Menu alignment: `left` or `right`.

Events

Event	Payload	Description
`action`	`Object`	Fired when a menu item is clicked. Payload contains the action's properties.

Styling

The ActionDropdown component uses Tailwind CSS for styling. Below are some key customizations:

Button Styling

.p-button-sm: Small size
.p-button-lg: Large size
.p-button-text: Text-only button

Menu Styling

.p-menuitem: Default menu item styling.
.danger-item: Styling for actions that are marked as "danger" (e.g., delete).

Alignment

.menu-right: Aligns the dropdown to the right.

Size Variants

.small: Small menu items.
.large: Large menu items.

Notes

Dependencies:
- This component relies on PrimeVue's Button and Menu components. Make sure to install and configure PrimeVue in your project.
Tailwind CSS:
- The styles use Tailwind CSS utilities. Ensure Tailwind CSS is configured in your project.
Validation:
- Action items are validated to ensure each item has a valid configuration (e.g., label and command are required unless it's a separator).

Installation

To use the ActionDropdown component, copy the file to your project and import it as needed.

Install PrimeVue and Tailwind CSS if not already installed:

npm install primevue @tailwindcss/postcss7-compat

Configure PrimeVue in your main file:

import { createApp } from "vue";
import PrimeVue from "primevue/config";

import App from "./App.vue";
import "./tailwind.css"; // Include Tailwind CSS

const app = createApp(App);
app.use(PrimeVue);
app.mount("#app");