DamBulkActionsBar Component

File Information

• Path: app/components/dam/DamBulkActionsBar.vue
• Purpose: Shared bulk-action toolbar shown when one or more assets/folders are selected. Renders inline icons for the most common actions and overflows the rest into a v-menu.

Overview

DamBulkActionsBar is the single shared bar used on every DAM list/grid page (search, folders, collages, trash, uploaded). It handles:

• Selected-count chip with a clear-selection button
• Optional "select all N" prompt for cross-page selection
• Inline icon buttons (capped by breakpoint and maxVisibleIcons)
• Overflow v-menu for any actions that don't fit inline
• Draggable floating mode (via useDraggableBar) when floating is true
• Skeleton loader state while the page is still loading

Props

Prop	Type	Default	Description
items	DamMenuItem[]	required	All available action items
selectedCount	Number	required	Number of currently selected items
contentLoading	Boolean	false	Renders chip-style skeleton loaders instead of buttons
skeletonCount	Number	5	How many skeleton chips to show
floating	Boolean	false	Makes the bar absolutely positioned and draggable
showSelectAllPrompt	Boolean	false	Shows the "Select all N" prompt text
totalSelectionCount	Number	0	The total count shown in the "Select all N" prompt
selectAllLoading	Boolean	false	Disables the select-all prompt while loading
maxVisibleIcons	Number | undefined	undefined	Override the breakpoint-driven icon cap (useful for narrow toolbars)

Events

Event	Payload	When
clear-selection	—	User clicks the selected-count chip to deselect all
select-all	—	User clicks the "Select all N" prompt
action	DamMenuItem	User clicks any action button (inline or overflow)

Inline vs Overflow Split

The number of inline icons is capped by breakpoint:

Breakpoint	Max inline icons
smAndDown	2
mdAndDown	4
Larger	All

maxVisibleIcons overrides this entirely when provided. Actions beyond the cap move into the overflow v-menu.

Items with visible: false are always hidden before the cap is applied.

Floating / Draggable Mode

When floating is true the bar renders with position: absolute and delegates drag logic to useDraggableBar. The composable tracks pointer-down → move → up and updates dragPosition, which the bar applies as left/top inline styles.

Drag position is persisted in localStorage via useDraggableBar so the bar re-appears in the same spot after navigation.

Usage

<DamBulkActionsBar
  :items="bulkMenuItems"
  :selected-count="selectedAssets.length"
  :floating="true"
  :show-select-all-prompt="hasMorePages"
  :total-selection-count="totalCount"
  @clear-selection="clearSelection"
  @select-all="selectAll"
  @action="handleBulkAction"
/>

Pages That Use It

Used on every DAM list/grid page via the page-specific composable that assembles bulkMenuItems from permitted actions.

Related Documentation

• DisplayPanel Component — view/sort control alongside the bulk bar
• DamListHeader Component — table header paired with the bulk bar in list view
• useDraggableBar Mixin — drag-position logic
• marqueeSelection Mixin — rubber-band multi-select that populates the selection