> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Box Dialog

> BoxDialog.vue Component Documentation

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

<CardGroup cols={2}>
  <Card title="Open/Close Management" icon="square-1">
    Uses <code>useBoxStore</code> to control the open/close state of the dialog.
  </Card>

  <Card title="Customizable Content" icon="square-2">
    Supports custom header, body, and footer content via slots.
  </Card>

  <Card title="Closable" icon="square-3">
    Includes an optional close button for user convenience.
  </Card>

  <Card title="Programmatic Control" icon="square-4">
    Allows programmatic open/close functionality using the <code>useBoxStore</code>.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { BoxDialog } from '@robojuice/velure-ui';
```

```vue theme={null}
<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

<ParamField path="box" type="string" default="''">
  The unique identifier for the dialog box, used to control its state via `useBoxStore`.
</ParamField>

<ParamField path="closable" type="boolean" default="true">
  Determines whether the dialog includes a close button.
</ParamField>

<ParamField path="tag" type="string" default="form">
  The HTML tag to wrap the inside of the box with.
</ParamField>

***

## Slots

<ParamField path="header" type="slot">
  Slot for the dialog header content, typically a title or icon. `<template #header></template>`
</ParamField>

<ParamField path="default" type="slot">
  The main content area of the dialog.
</ParamField>

<ParamField path="footer" type="slot">
  Slot for the dialog footer content, typically buttons. `<template #footer></template>`
</ParamField>

***

## Example Use Cases

### Simple Dialog with Header and Footer

```vue theme={null}
<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

```vue theme={null}
<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.

```vue theme={null}
<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.