Components / Actions

Action Surface

Define an action once and present it consistently through palettes, context menus, sheets, toolbars, and opt-in shortcuts.

Preview

Aurora launch

Active

Choose a project action

Install

Run in your project

npx @getweini/cli@latest add action-surface

Use cases

Command palette

Expose a searchable set of application commands from a deliberate button or shortcut.

Shared action catalog

Present the same action definitions through a toolbar and context menu while handling selections centrally.

Usage example

Vue

<ActionProvider :actions="actions" @select="execute">
  <ActionShortcut action-id="search" />
  <Button @click="paletteOpen = true">Open commands</Button>
  <ActionPalette v-model:open="paletteOpen" :messages="paletteMessages" />
  <ActionContextMenu label="Project actions">
    <template #trigger>
      <ProjectCard />
    </template>
  </ActionContextMenu>
  <ActionSheet v-model:open="sheetOpen" :messages="sheetMessages" />
  <ActionToolbar :messages="toolbarMessages" />
</ActionProvider>

More examples

Searchable commands

The provider handles one selection event for all action surfaces.

Searchable commands

<script setup lang="ts">
import { ref } from 'vue'
import ActionProvider from './components/ui/action-surface/ActionProvider.vue'
import ActionPalette from './components/ui/action-surface/ActionPalette.vue'
import Button from './components/ui/button/Button.vue'
const open = ref(false)
const actions = [{ id: 'new', label: 'New project', keywords: ['create'] }, { id: 'search', label: 'Search projects' }]
const messages = { label: 'Commands', searchLabel: 'Search commands', clearSearch: 'Clear search', empty: 'No commands found' }
function run(id: string) { /* Execute the authorized command. */ }
</script>
<template>
  <ActionProvider :actions="actions" @select="run($event.action.id)">
    <Button @click="open = true">Open commands</Button>
    <ActionPalette v-model:open="open" :messages="messages" />
  </ActionProvider>
</template>

Context and toolbar actions

The same definitions appear in two explicit interaction modes.

Context and toolbar actions

<script setup lang="ts">
import ActionProvider from './components/ui/action-surface/ActionProvider.vue'
import ActionContextMenu from './components/ui/action-surface/ActionContextMenu.vue'
import ActionToolbar from './components/ui/action-surface/ActionToolbar.vue'
const actions = [{ id: 'duplicate', label: 'Duplicate', priority: 10 }, { id: 'archive', label: 'Archive', destructive: true }]
const messages = { label: 'Project actions', overflow: 'More actions' }
</script>
<template>
  <ActionProvider :actions="actions" @select="$emit('action', $event.action.id)">
    <ActionContextMenu label="Project actions"><template #trigger><div tabindex="0">Project card</div></template></ActionContextMenu>
    <ActionToolbar :messages="messages" />
  </ActionProvider>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Action Surface
Name	Type	Default or requirement
`ActionProvider actions`	ActionDefinition[]	required
`select`	ActionSelection	event
`ActionPalette / ActionSheet open`	controlled or uncontrolled	false
`ActionShortcut actionId / shortcut`	string	required / action shortcut

The toolbar fills its container, shares space between actions, and moves lower-priority actions into More actions when space is tight. In the palette, Up and Down highlight commands while search keeps focus; Enter runs the highlighted command. Your app supplies execution, confirmation, and undo behavior. Shortcuts do not run while typing in editable controls.

Implementation notes

ActionProvider emits an action and its source; the application performs authorization and side effects.
ActionToolbar moves lower-priority actions into an overflow menu when space is limited.

Accessibility and localization

Supply the required message objects in the application’s language.
Shortcuts are registered only through ActionShortcut; a displayed shortcut is merely a hint.