Skip to main content
The BoxDialog.vue component is a reusable Vue.js component for creating modal dialog boxes. It integrates with the useBoxStore Pinia store to manage its open and close states programmatically. This component is typically used for displaying forms, confirmations, or any other contextual content requiring user interaction.

​
Features

Open/Close Management

Uses useBoxStore to control the open/close state of the dialog.

Customizable Content

Supports custom header, body, and footer content via slots.

Closable

Includes an optional close button for user convenience.

Programmatic Control

Allows programmatic open/close functionality using the useBoxStore.

​
Usage

​
Basic Example

import { BoxDialog } from '@robojuice/velure-ui';

<template>
  <Button @click="boxes.open('dialog')">
    <IconAlert />
    Dialog
  </Button>

  <BoxDialog
    box="dialog"
    class="modal-small"
  >
    <template #header>
      <span>Dialog</span><IconAlert />
    </template>

    <InputTextarea label="Description"></InputTextarea>

    <template #footer>
      <Button @click="boxes.close('dialog')">
        Done
      </Button>
    </template>
  </BoxDialog>
</template>

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

const boxes = useBoxStore();
</script>

​
Props

​
box
string
default:"''"
The unique identifier for the dialog box, used to control its state via useBoxStore.
​
closable
boolean
default:"true"
Determines whether the dialog includes a close button.
​
tag
string
default:"form"
The HTML tag to wrap the inside of the box with.

​
Slots

​
header
slot
Slot for the dialog header content, typically a title or icon. <template #header></template>
​
default
slot
The main content area of the dialog.
​
footer
slot
Slot for the dialog footer content, typically buttons. <template #footer></template>

​
Example Use Cases

<BoxDialog box="simpleDialog" class="modal-small">
  <template #header>
    <span>Simple Dialog</span>
  </template>

  <div>
    This is a simple dialog box content.
  </div>

  <template #footer>
    <Button type="button" @click="boxes.close('simpleDialog')">Close</Button>
  </template>
</BoxDialog>

​
Programmatically Opening a Dialog

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

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

const boxes = useBoxStore();
</script>

​
Form Submission

Dialog boxes are automatically wrapped in a form tag. 
<BoxDialog
  box="form"
  class="modal-small"
  @submit="console.log('submit')"
  >

  <template #header>
    <span>Form</span>
  </template>

  <div class="flex flex-col gap-4">
    <InputText label="Name" required></InputText>
    <InputTextarea label="Description"></InputTextarea>
  </div>

  <template #footer>
    <Button>
      Submit
    </Button>
    <ButtonHollow type="button" @click="boxes.close('form')">
      Cancel
    </ButtonHollow>
  </template>
</BoxDialog>

​
Notes

  • State Management: The useBoxStore Pinia store is required to manage the open/close state of the BoxDialog component. Ensure the store is properly imported and configured.
  • Custom Content: Use the header, footer, and default slots to customize the dialog content as needed.
  • Closable Option: Use the closable prop to toggle the presence of the close button. If false, the dialog can only be closed programmatically or by interacting with external buttons.
  • Responsive Design: The dialog box can be styled using the class attribute to adjust its size or layout.
For further customization, refer to the component’s source code.