Skip to main content
The BoxAction.vue component is a reusable Vue.js component designed to toggle a menu box or overlay panel. It integrates with the useBoxStore Pinia store to manage its open and close states programmatically. The component is often used for displaying action menus, filters, or other contextual information.

​
Features

Open/Close Management

Uses useBoxStore to control the open/close state.

Customizable Position

Supports left or right positioning of the box using the from prop.

Dynamic Content

Allows the inclusion of custom content via slots.

Accessible

Includes ARIA roles and keyboard support (Escape key) for accessibility.

​
Usage

​
Basic Example

<template>
  <div class="relative">
    <ButtonText @click="boxes.open('icon_alert')">
      <IconAlert />
      <span class="sr-only">Action Box - Icon Alert</span>
    </ButtonText>
    <BoxAction
      box="icon_alert"
      label="Icon Alert"
      from="left"
    >
      <div>
        <ButtonTextAction><IconUpload /> Upload</ButtonTextAction>
        <ButtonTextAction><IconDownload /> Download</ButtonTextAction>
      </div>
    </BoxAction>
  </div>
</template>

<script setup>
import { useBoxStore, BoxAction, ButtonTextAction  } from '@robojuice/velure-ui';

const boxes = useBoxStore();
</script>

​
Props

​
box
string
default:"''"
The unique identifier for the box, used to control its state via useBoxStore.
​
label
string
default:"'Filter'"
The label displayed at the top of the box.
​
from
string
default:"'left'"
Specifies the position of the box. Options: 'left', 'right'.

​
Example Use Cases

​
Left-Aligned Box

<BoxAction box="filters" label="Filters" from="left">
  <div>
    <ButtonTextAction>Option 1</ButtonTextAction>
    <ButtonTextAction>Option 2</ButtonTextAction>
  </div>
</BoxAction>

​
Right-Aligned Box

<BoxAction box="settings" label="Settings" from="right">
  <div>
    <ButtonTextAction>Setting 1</ButtonTextAction>
    <ButtonTextAction>Setting 2</ButtonTextAction>
  </div>
</BoxAction>

​
Opening a Box Programmatically

<template>
  <Button @click="boxes.open('settings')">Open Settings</Button>
</template>

<script setup>
import { useBoxStore } from '@robojuice/velure-ui';

const boxes = useBoxStore();
</script>

​
Notes

  • State Management: The useBoxStore Pinia store is required to manage the open/close state of the BoxAction component. Ensure the store is properly imported and configured.
  • Custom Content: Use the default slot to include dynamic content such as buttons, icons, or custom components.
  • Positioning: The from prop controls the alignment of the box. Use 'left' or 'right' to suit your design requirements.
For further customization, refer to the component’s source code.